When you create a form with React, you might want to set focus on an input element after it is rendered. How do you that?
Let's build a simple React application:
You can find the full source code in this GitHub repository.
Our application is going to render a form with an input field for entering an email address. That's it, nothing else. Once this input element is rendered, we will set focus on it, so that our users could start typing their email address immediately.
Our application will be made of a single component called
App, let's create it:
First, let's focus on its
We see three
div elements with class names that you might recognize if you're familiar with Bootstrap. Bootstrap helps us create layout for our page.
Inside of the
div elements we have a
form element that has
input child elements.
Let's focus on the
Now let's think about how setting focus on an
input element will work. The first thing to understand is that our
input element doesn't exist in the DOM until our
App component renders it. And we know that we can't focus on something that doesn't exist!
The first step is to render our
input element. React will do this by calling the
render method in our
App component. Now our
input element exists in the DOM, but to focus on it, we need to have a reference to it, don't we? That's where React offers us a prop called
ref. We can use this prop on our
input element to associate it with a reference that we'll name
Now when React renders our
input element in the DOM it creates a reference to that element and stores it in the
this.emailInput reference object. Where does this object come from? We need to create it!
this.emailInput reference object in our
React.createRef() function to create a new reference object and we're assigning it to our
Now you know that to create a reference to an element in the DOM, you need to 1) create a new reference object in component's
constructor method using
React.createRef() function call and then 2) add a
ref prop to the element that we want to reference - passing our reference object to that prop, for example:
That's all we need to do to create a reference to an element in the DOM that is rendered by our
render method. The next question we should ask ourselves is: where do we access it, how do we access it and how do set focus on it?
Let's answer these questions!
What's the next component's lifecycle method that React calls right after the
render method is called? It's
componentDidMount method and it's a perfect place for us to access our reference and set a focus on the
Inside of our
componentDidMount method we're calling
focus() method on the
current property of our
this.emailInput reference object:
current property is a property that React creates on our
this.emailInput reference object - this property stores a reference to our
input element in the DOM. Calling
.focus() method on the
current property will set the focus on our
And now you know how to set focus on input after render in React 16.
Thank you for reading this React tutorial!