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>neveropen</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.
