ReactJS: How-to set focus to input-element when it enters the DOM?
<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>