Published Feb 03 2021
I had a modal with a simple form, with just an
input field in it, and I wanted to put that element on focus as soon as the modal was added to the DOM by React.
I began thinking about many different ways to do so, maybe using
useEffect() to trigger an event when the component was added to the DOM, or using the
ref prop to create a reference to the DOM element and call its
focus() method but then I realized I was thinking too complicated and just using the
autofocus HTML attribute on the element could work.
And it did. Remember that it is
autoFocus in JSX, with the capital
<input autoFocus ...// rest of the input field attributes
I wrote an entire book on this topic 👇