title: ReactJS: How-to set focus to input-element when it enters the DOM?
body: <p>How to set focus to an <code>input</code> element when it enters the DOM?</p>
  
  <h3>Scenario</h3>
  
  <p>When a button is clicked the input element is displayed. How to set the focus to this element?</p>
  
  <h3>Code-Snippet</h3>
  
  <pre class="lang-js prettyprint-override"><code>class Component extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        showInput: false
      }
    }
  
    render() {
        return (
          &lt;div&gt;
            &lt;div onClick={() =&gt; {
                this.setState({showInput: true});
                ReactDOM.findDOMNode(this.refs.myInput).focus() // &lt;- NOT WORKING
            }}&gt;
              Show Input
            &lt;/div&gt;
            {
              (this.state.showInput) ? (
                  &lt;input
                      type="text"
                      ref="myInput"
                  /&gt;
              ) : ""
            }  
          &lt;/div&gt;
        );
    }
  }
  </code></pre>
  
  <p>Calling <code>ReactDOM.findDOMNode(this.refs.myInput).focus()</code> after state change does not work. Also changing just the <code>style</code> or <code>type</code> property on state change does not work.</p>