Focusing on inputs in react

Focusing the user onto an input is usually pretty simple

// standard DOM

However in React you need a reference to this element as it may change over time. This is done with the ref prop.

// inside a React functional component
const input = useRef()
return (
 <input ref={input} />

Now we’ve got a variable which will always point to this element, even between renders. The input tag can be assessed via


The current object on the ref will always be updated, so you can be sure you are hitting the current element.