Setting focus on an input field after rendering in ReactJS can be done in the following ways, but before doing that, set up your project structure with the following steps:
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure: It will look like the following.
Project Structure
Approach 1: we can do it in componentDidMount() function and refs callback. For example:
componentDidMount() {
this.nameInput.focus();
}
Filename: App.js
Javascript
import React, { Component } from "react"; class App extends Component {     componentDidMount() {     this.nameInput.focus();   }     render() {     return (       <div>         <input           defaultValue="It Won't focus"        />         <input           ref={(input) => { this.nameInput = input; }}           defaultValue="It will focus"        />       </div>     );   }   }   export default App; |
Approach 2: If we just want to focus on an element when it mounts (initially renders) a simple use of the autoFocus attribute will do. we can use the autoFocus prop to have an input automatically focus when mounted.Â
Filename: App.js
Javascript
import React, { Component } from "react";   class App extends Component {       render() {     return(     <div>       <input         defaultValue="It Won't focus"       />       <input autoFocus         defaultValue="It will focus"      />     </div>     );   }          }   export default App; |
Approach 3: We can use the below syntax using the inline ref property.
<input ref={input => input && input.focus()}/>
Filename: App.js
Javascript
import React, { Component } from "react";   class App extends Component {       render() {     return(       <div>         <input           defaultValue="It Won't focus"         />         <input           ref={(input) => {input && input.focus() }}           defaultValue="It will focus"        />       </div>     );   }             }   export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
