AutoFocus an input element in react JS : <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>
