title: AutoFocus an input element in react JS
body: <p>I am unable to autofocus the input tag rendered in this component. What am I missing here?</p>
  
  <pre><code>class TaskBox extends Component {
    constructor() {
      super();
      this.focus = this.focus.bind(this);
    }
  
    focus() {
      this.textInput.focus();
    }
  
    componentWillUpdate(){
      this.focus();
    }
  
    render() {
      let props = this.props;
      return (
        &lt;div style={{display: props.visible ? 'block' : 'none'}}&gt;
          &lt;input
          ref={(input) =&gt; { this.textInput = input; }}
          onBlur={props.blurFN} /&gt;
          &lt;div&gt;
            &lt;div&gt;Imp.&lt;/div&gt;
            &lt;div&gt;Urg.&lt;/div&gt;
            &lt;div&gt;Role&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;button&gt;Add goal&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Any help is appreciated.</p>