How to access a DOM element in React ?

React manages the rendering of components and updates the DOM automatically. However, there are situations where you may need to access a specific DOM element directly. We will use the Refs to access a DOM element in React. Refs provide a way to access DOM nodes or React elements created in the render method.

Prerequisites

• React JS
• React createRef
• React JS useRef hook

Approaches for how to access dom elements in React

Steps to create 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:

Method 1: Using Class Components with React.createRef

The createRef is a function that creates a new instance of the ref for every re-render. It doesnot save its value beteen re-renders. When we assign a ref to an element in the render, then we can access the element using the current attribute of the ref.

Example: We will access the input field in react class component using creatRef funtion.

// Filename - App.js import React from "react"; class App extends React.Component {  constructor(props) {  super(props);  // Create instance  this.myRef = React.createRef();  }  handleClick = () => {  this.myRef.current.value = "you clicked on button";  };  render() {  return (  <div  style={{  textAlign: "center",  margin: "auto",  }}  >  <h1 style={{ color: "green" }}>  GeeksforGeeks  </h1>  <h3>Accessing DOM using Class component</h3>  {/* Assign DOM element to ref*/}  <input ref={this.myRef} />  <button onClick={this.handleClick}>  click me  </button>  </div>  );  } } export default App; 

Step to run the application:

Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/

Method 2: Using Functional Components with useRef Hook

React  useRef is a hook that allows to directly create a reference to the DOM element in the functional component. Once a ref is created we can directly access and modify the content of that DOM element.

Example: We will access the input field in react functional component using useRef hook.

// Filename - App.js import React, { useRef } from "react"; export default function App() {  const myRef = useRef();  const handleClick = () => {  myRef.current.value = "you clicked on button";  };  return (  <div  style={{ textAlign: "center", margin: "auto" }}  >  <h1 style={{ color: "green" }}>  GeeksforGeeks  </h1>  <h3>Accessing DOM using funtional component</h3>  <input ref={myRef} />  <button onClick={handleClick}>Click me</button>  </div>  ); } 

Step to run the application:

Open the terminal and type the following command.  

npm start

Output: Open the browser and our project is shown in the URL http://localhost:3000/