Class component
- Follow the above steps for project setup.
- Suppose you have a parent component called App which has an object called person as its state.
- Now, In the ChildComponent, we can access the person object using the props passed down to it, and render its properties as needed.
Example: Now write down the following code in the App.js file.
Javascript
import React, { Component } from "react";// React class component here act // as a parent componentclass App extends Component { // state we will send in child component state = { person: { name: "Geeks for Geeks", age: 23, email: "gfg@example.com", }, }; render() { const { person } = this.state; return ( <div> <h1>App Component</h1> // sending the state in child component <ChildComponent person={person} /> </div> ); }}// React class component here act as a child componentclass ChildComponent extends Component { render() { const { name, age, email } = this.props.person; return ( <div> <h2>Child Component</h2> <p>Name: {name}</p> <p>Age: {age}</p> <p>Email: {email}</p> </div> ); }}// Exporting the componentexport default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Output
How to Reference a Specific Object to Pass Down as Properties in ReactJS ?
ReactJS, a widely used JavaScript library, employs Props, enabling the passing of data from parent to child components. Props are read-only, facilitating data access by child components via ‘this.props.’
The ReactJS library has two components:
Contact Us