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:

• Functional Component
• Class Component

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:

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: "geeksforgeeks@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:

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: "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:

Output