title: Using refs with conditional rendering
body: <p>I have a problem with ref and conditional rendering. 
  I would like to focus an input tag when I click on a button tag. 
  Basically, I have this simplified code. </p>
  
  <pre><code>class App extends React.Component {
    textInput
    constructor(props) {
      super(props)
      this.state = {isEditing: false}
      this.textInput = React.createRef()
    }
  
      onClick = () =&gt; {
          this.setState({isEditing: !this.state.isEditing})
          this.textInput.current.focus();
      }
    render () {
      let edit = this.state.isEditing ?
          (&lt;input type="text" ref={this.textInput} /&gt;)
          : ""
      return (
        &lt;div&gt;
              &lt;button onClick={this.onClick}&gt;lorem &lt;/button&gt;
              {edit}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>When I click on the button, the input tag is displayed but the ref <code>textInput</code> is still set to <code>null</code>. Thus I can't focus the input.</p>
  
  <p>I found some workaround like: </p>
  
  <ul>
  <li>set <code>autoFocus</code> property in the input tag</li>
  <li>hide the input tag with css when <code>isEditing == false</code></li>
  </ul>
  
  <p>But actually it is a very basic pattern and I would like to know if there is a clean solution.</p>
  
  <p>Thank you</p>