¿Cómo elevar el estado dos niveles en ReactJS?

Queremos elevar el estado dos niveles hacia arriba, de modo que cuando ocurra un evento en el componente de nivel inferior, debería afectar al estado dos niveles hacia arriba. Por ejemplo, hay tres componentes X, Y, Z. X es el padre del Componente Y, el Componente Y es el padre del Componente Z. 

Cuando ocurre algún evento en el componente Z, debería afectar el estado del componente X que está dos niveles por encima del componente Z. Para esto, tenemos que pasar una función como accesorio del componente X al componente Y, luego el componente Y pasará esta función al componente X para que el Componente X pueda llamar a esa función y cambiar el estado del componente X.

Ejemplo: 

• Estado de X

  this.state={ stateA: "whatever"}

• Función en X:

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

• Ahora pásalo como apoyo a Y

  <Y setStateX={this.setStateX} />

• En Y:

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

• En Z:

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

Llame a la función para establecer el estado de X.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo:

import React from 'react'
  
class X extends React.Component {
  
    state = {
        name:"Kapil"
    }
  
    setStateX = (newState) => {
        this.setState({name:newState})
    }
      
    render() {
        return (
        <div>
        <h4>Hi my name is { this.state.name } </h4>
        <Y setStateX={this.setStateX}/>
        </div>
        );
    }
      
}
class Y extends React.Component {
  
    render() {
        return(
            <div>
                <Z setStateX = {this.props.setStateX}/>
            </div>
        );
    }
}
class Z extends React.Component {
    render() {
        return(
            <div>
                <button onClick = { ()=> {
                    this.props.setStateX("Nikhil")
                }}>click to change state</button>
            </div>
        )
    }
}
export default X;

Producción: