How to Reference a Specific Object to Pass Down as Properties in ReactJS ?

Last Updated : 28 Apr, 2025

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: "Geeks for Geeks",
        age: 20,
        email: "[email protected]",
    };
    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: "Geeks for Geeks",
            age: 23,
            email: "[email protected]",
        },
    };
    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: