In React ES6, why does the input field lose focus after typing a character?

Question

In my component below, the input field loses focus after typing a character. While using Chrome\'s Inspector, it looks like the whole form is being re-rendered instead of ju

Answer 1

What's happening is this:

When your onChange event fires, the callback calls setState with the new title value, which gets passed to your text field as a prop. At that point, React renders a new component, which is why you lose focus.

My first suggestion would be to provide your components keys, particularly the form and the input itself. Keys allow React to retain the identity of components through renders.

Edit:

See this documentation on keys: https://reactjs.org/docs/lists-and-keys.html#keys