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:
Steps to Create the React Application:
Step-1: Create a React Application And Installing Module using the following command:
npx create-react-app projectfoldername
Step-2: Move into the project folder using the following command:
cd projectfoldername
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",
}
Functional component
Now, to reference a specific object to pass down as properties, you first need to create the object and assign it to a variable within the component’s code. You can then pass this object down as a prop to child components. For this write down the following code in the app.js file present inside the src folder.
Example: Now write down the following code in the App.js file.
Javascript
// React functional component here // act as a parent component function App() { // The data we will send as props // in child component const userData = { name: "Beginner for Beginner" , age: 20, email: "w3wiki@example.com" , }; return ( <div> <h1>User Profile</h1> <Profile data={userData} /> </div> ); } // React functional compont here works as // a child compont accepting the props function Profile(props) { return ( <div> <h2>{props.data.name}</h2> <p>Age: {props.data.age}</p> <p>Email: {props.data.email}</p> </div> ); } // Exporting the component export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
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 component class App extends Component { // state we will send in child component state = { person: { name: "Beginner for Beginner" , 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 component class 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 component export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Contact Us