React · Middle · Question 65 of 75

Why might a list of controlled inputs lose focus on each keystroke?

{fields.map((f) => <input key={Math.random()} value={f.value} onChange={...} />)}

✓Correct answer: A new random key on every render makes React remount each input
2Controlled inputs always lose focus
3onChange blurs the field

Explanation

Keys must be stable. A changing key destroys the old DOM node (and its focus and state) and creates a new one.

Further reading

Test yourself

Take the React · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.