React, focus an item in React when added to the DOM
How to focus an item in React as soon as added to the DOM`
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 F
:
<input
autoFocus
...// rest of the input field attributes
→ I wrote 17 books to help you become a better developer:
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025