How to lift state two levels up in ReactJS ?

We want to lift the state two levels up such that when an event occurs at the lower level component then it should affect the state two levels up. For example, there are three components X, Y, and Z. X is the parent of Component Y, and Component Y is the parent of Component Z.

Prerequisites:

• NodeJS or NPM
• React JS

Approach:

When some event occurs in component Z then it should affect the state of component X which is two-level up from component Z. For this we have to pass a function as a prop from component X to component Y then component Y will pass this function to component X so that Component X can call that function and change the state of component X. Following are the components:

State of X

this.state={ stateA: "whatever"}

Function in X:

setStateX(newValue){
   this.setState({stateA: newValue});
}

Now pass it as a prop to Y

<Y setStateX={this.setStateX} />

In Y:

<Z setStateX={this.props.setStateX} />

In Z:

this.props.setStateX("new value of stateX");

Steps to Create the React Application And Installing Module:

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:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file

Step to Run the Application: Open the terminal and write the following command in your terminal.

npm start

Output: