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

Once added to the DOM, how to focus items in React

I have a modal with a simple form, only oneinputIn the field, I want to put the element in focus as soon as React adds the pattern to the DOM.

I started thinking about many different methods, maybe usinguseEffect()Trigger an event when the component is added to the DOM or usedrefProps that create references to DOM elements and call their propertiesfocus()Method, but then I realized what I was thinking was too complicated, I just usedautofocusHTML attributes on elements can work.

It did it. Remember that isautoFocusIn JSX, use capital lettersF:

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

Download mine for freeResponse Handbook


More response tutorials: