I had a little dynamic form in a React component I was building. The form had a meal title with an ingredient field below it. One could click add ingredient and another ingredient field would be added to the form. I wanted to make sure that the newly added field would gain focus but was a little lost.
In the state was an array of ingredients. When I clicked add ingredient I’d add a null ingredient which would cause a rerender and show the new field. I started with something like this:
In the end it was easily done by setting a
Autofocus property to true on the last rendered field like so, conveniently eliminating the
focusIngredientField function all together. In the render method (with some variable initialization omitted).