How do I get inputRef to return <input> element from <Textfield>? Tried everything I can think of and it's still null

Question

I have a TextField that I only render when another radiobutton is clicked. According to the React and Material-UI documentation, I should be able to get a ref to an input element inside a Mui TextField using inputRef={this.myRef} on the TextField. I'm able to do this for another TextField that is not toggled, but when I try that the with TextField that I just turn on, it shows null.

I've tried using inputRef={this.otherText} and inputProps={{ref: this.otherText}} and same result.

// Start of my class where I do the createRef()
class Form extends Component {
  constructor(props) {
    super(props);
    this.otherText = React.createRef();
  }

// Start of function where I try to reference the ref:
processApplication = e => {
    if (e.target.value.toLowerCase() === 'other') { // this triggers the         TextField to be rendered
        console.log(this.otherText); // Returns null, kinda - see screenshot
    }

// The TextField I'm trying to reference:
<TextField
    id='applicationOther'
    name='applicationOther'
    label='Describe application:'
    margin='normal'
    multiline={true}
    fullWidth={true}
    onChange={this.anyChange}
    autoFocus={true}
    inputRef={this.otherText}  // Here's where the reference is made
/>

I expect this.otherText to have a reference to the element, but this.otherText.current is null.

You say the TextField is only rendered under certain circumstances. That's very likely the reason why you're getting a null: It hasn't rendered yet. But in order to give you more details on why the timing isn't working we'll need to see your render method with its conditional render, your code for setting the state to hide/show, and your code for calling processApplication. — Nicholas Tower
Can you explain what you want the ref for? 99% of the time you don't need them. they're good when you need to do width/height calculations — azium
@NicholasTower yes that's what I'm thinking, I've moved on as this was not crucial and I was spending way too much. time. Thank you for the insight. I'm using it to set the text of an element once it appears. — YoungZaphod

Predrag Beocanin Predrag Beocanin · Accepted Answer · 2019-01-25T21:24:48

So to add some content to an input of any tipe, including Material TextField, you'd assign it as a value, for instance:

this.state = { input: 'Some string' }
<TextField value={this.state.input} />

Keep in mind the slight difference between uncontrolled and controlled components, so depending on your use case, you may want to pass defaultValue instead of value. From the docs:

In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value.

Docs link

How do I get inputRef to return <input> element from <Textfield>? Tried everything I can think of and it's still null

2 Answers