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

I'm new to React, and have been running into this issue.

Here's what I did to solve:

1. First move all of your components into your components folder and then import them where you want to use them
2. Make sure all of your form elements get a name and id property
3. Make sure all components as you walk up the tree get a unique key

Someone smarter than me can probably tell us why we can skip step one and keep everything inline so to speak, but this just helped me organize the code.

I think the real issue is React is rerendering everything (as already stated) and sometimes that rerender is happening on a parent component that doesn't have a key but needs one.

My problem was with ExpansionPanel components wrapping my custom components for form inputs. The panels needed key as well!

Hope this helps someone else out there, this was driving me crazy!