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

0 0 2 minutes read

In ReactJS, it is common to have multiple dynamically generated components rendered within a parent container. Each child component may have its own set of attributes, including a unique key attribute, which helps React efficiently update and re-render components. There may be scenarios where you need to access the key attribute of the parent div when a button within the child component is clicked. In this article, we will explore how to achieve this functionality in ReactJS.

Creating 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

Step 3: Create Parent.js and Child.js components.

Project Structure: It will look like the following.

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Javascript

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

Parent.js

Javascript

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;

Child.js

Javascript

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/, you will see the following output.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!