ReactJS is a popular and well-known JavaScript library for developing websites. One of the key features of ReactJS is the ability to pass down properties from a parent component to a child component referred to as Props. Props are an important feature of the ReactJS library, Props allow components to access data from their parent components. Props are read-only meaning that props cannot be modified by the child components. The parent components pass the props to the child components as properties and the child components can access the props using ‘this.props’ 
The React.js library has two components:
- Functional component
- Class component
Let’s understand how to reference a specific object to pass down as properties in a functional component with an example:
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:
Project Structure
Step-3: 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.
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: "Geeks for Geeks", age: 20, email: "neveropen@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; |
In the above code, we make Profile as a child component, and from the App component, we pass the user data in the Profile component, and in the Profile component we can access the object data using props
Step-4: Run the code using the following command:
npm start
Output:
Now, Let’s understand how to reference a specific object to pass down as properties in the Class component with an example:
- 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.
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: "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 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; |
In this way, we can reference a specific object to pass down as properties in the class component.
Output:
