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.
