¿Cómo obtener el atributo clave del div principal cuando se hace clic en el botón en ReactJS?

En ReactJs podemos pasar propiedades en el componente secundario desde el componente principal. Entonces, haremos lo mismo y pasaremos la clave de un padre como una propiedad en el componente hijo.

Creación de la aplicación React e instalación del módulo:

• 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

Paso 3: Cree los componentes Parent.js y Child.js.

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React, { Component }  from 'react';
  
import Parent from './Parent';
  
class App extends Component {
  
  state = {
    key: "GFG",
  }
  
  render() {
    return (
      <div>
        <h2>GeeksforGeeks</h2>
        <Parent key={this.state.key} keyValue={this.state.key}/>
      </div>
    );
  }
}
  
export default App;

import React, { Component }  from 'react';
  
import Child from './Child';
  
class Parent extends Component {
  
  render() {
    return (
        // Passing key in child
        <div>
            <h3>(Parent.js) Key = {this.props.keyValue}</h3>
            <Child keyValue={this.props.keyValue}/>
        </div>
    );
  }
}
  
export default Parent;

import React, { Component }  from 'react';
  
class Child extends Component {
  
  state = {
    key: "",
  }
  
  handleClick = () => {
    this.setState({key: this.props.keyValue});
  }
  
  render() {
    return (
      <div>
        <h3>(Child.js) Key = {this.state.key}</h3>
        <button onClick={this.handleClick}>
            Get Parent Key
        </button>
      </div>
    );
  }
    
}
  
export default Child;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.