ReactJS findDOMNode() Method

findDOMNode in React is used to directly access a component's underlying DOM node. It is mainly used in class components for DOM manipulation, animations, or integration with third-party libraries. It's considered unsafe in modern React development.

Syntax:

ReactDOM.findDOMNode(component)

Parameters:

• component: The component can be either a React component instance or a DOM element. When passed, it retrieves the corresponding DOM node associated with the component.

Return Value:

The findDOMNode() method returns the DOM node associated with the specified React component or null if the component is not mounted.

Steps to Create React App

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.

Example: A React component that changes the style of a specified DOM element when a button is clicked using findDOMNode().

// Filename - App.js import React from "react"; import ReactDOM from "react-dom"; // Defining our App Component const App = () => {  // Function to get element from findDOMNode()  function find() {  const node = document.getElementById("node");  const a = ReactDOM.findDOMNode(node);  console.log(a);  if (a) {  a.style.color = "green";  a.style.fontSize = "x-large";  }  }  // Returning our JSX code  return (  <>  <div>  <h1>GeeksforGeeks</h1>  <div id="node">DOM Node</div>  <button onClick={find}>Click to find</button>  </div>  </>  ); }; // Exporting your Default App Component export default App; 

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: