How to get key attribute of parent div when button is clicked in ReactJS ?

In ReactJS, it’s a common practice to render multiple dynamically generated components within a parent container. Each child component often comes with its unique set of attributes, including a distinctive key attribute that aids React in optimizing updates and re-renders.

Prerequisites:

• NodeJS or NPM
• React JS

Steps to create 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",
}

Approach:

• AppJs:
  • Initializes a state with a key, set to “GFG.”
  • Renders a parent `div` containing an `h2` and a `Parent` component.
  • Passes the key from the state to the Parent component.
• ParentJs:
  • Receives the key as a prop and displays it in an `h3`.
  • Renders a Child component, passing down the key as `keyValue`.
• ChildJs:
  • Has a state property `key` initialized as an empty string.
  • Displays the current state of the key in an `h3` element.
  • Contains a button, and when clicked, updates its state with the key received as `keyValue` from the Parent.

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

Javascript

//App.js

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;

Javascript

//Parent.js

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;

Javascript

//Child.js

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;

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