ReactJS: How-to set focus to input-element when it enters the DOM?

Question

How to set focus to an input element when it enters the DOM?

Scenario

When a button is clicked the input element is displayed. How to set the focu

Answer 1

In the componentDidMount and componentDidUpdate hooks do this:

ReactDOM.findDOMNode(this.refs.myInput).focus()

Answer 2

Assuming you only need one visible input on the page at a time to have autofocus Poh Zi How's suggestion of using the autofocus is probably the simplest.

<input type="text" autofocus/>

should do the trick, no JS needed!