# React, focus an item in React when added to the DOM

> Learn the simplest way to focus an input in React as soon as it is added to the DOM: just use the autoFocus attribute, with a capital F in your JSX.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2021-02-03 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/react-focus-input-field/

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](https://flaviocopes.com/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`:

```js
<input
  autoFocus
  ...// rest of the input field attributes
```