How to pass an Object as props to a component in React.js

To pass an Object as props to a component in React.js, we will use Destructuring and Spread syntax in ES6. Let’s see this article to know how to use it.

Pass an Object as props to a component in React.js

Using Destructuring

Destructuring is a syntax that allows you to assign object properties as variables. This can significantly reduce the lines of code required to manipulate the data in these structures.

After creating a new project, open your App.js file and create an object like this:

let person = {
    name: 'Laura',
    age: 24,
    email: '[email protected]',
    gender: 'female'
};

This is an object that holds a person’s information. Next, you need to create a PersonInfor component to display the information in the object and add it to the App component.

import "./styles.css";

export default function App() {
    let person = {
        name: "Laura",
        age: 24,
        email: "[email protected]",
        gender: "female"
    };

    return (
        <div className="App">
            <PersonInfor person={person} />
        </div>
    );
}

function PersonInfor({ person }) {
    return (
        <div>
            Name: {person.name}
            <br />
            Age: {person.age}
            <br />
            Email: {person.email}
            <br />
            Gender: {person.gender}
        </div>
    );
}

<PersonInfor person = {person} /> : PersonInfor takes the property ‘person’ assigned the value of the object we created. 

By using restructuring, the object is passed to the PersonInfor function as an argument. We need to access the inner property to get the information.

Output:

Name: Laura
Age: 24
Email: [email protected]
Gender: female

Using Spread syntax

Spread (…) is another useful addition to working with arrays, objects, and function calls. The spread allows objects to be unpacked or expanded.

With Spread, we will modify the above code a bit as follows:

import "./styles.css";

export default function App() {
    let person = {
        name: "Laura",
        age: 24,
        email: "[email protected]",
        gender: "female"
    };

    return (
        <div className="App">
            <PersonInfor {...person} />
        </div>
    );
}

function PersonInfor(props) {
    return (
        <div>
            Name: {props.name}
            <br />
            Age: {props.age}
            <br />
            Email: {props.email}
            <br />
            Gender: {props.gender}
        </div>
    );
}

<PersonInfor {...person} /> : unpacks the elements in the person object and passes them as props to the PersonInfor function.

Output:

Name: Laura
Age: 24
Email: [email protected]
Gender: female

The spread property can be helpful when you’re building generic containers. However, they can also make your code messy by making it easy to pass lots of unrelated props to components that don’t care about them. We think you should use this syntax sparingly.

Summary

Hopefully, the above solutions will help you pass an Object as props to a component in React.js. If you have any questions, please leave us a comment.

Cheryl Matth

After studying and researching, I have acquired the necessary programming skills of a web programmer. In addition to HTML, Css, Bootstrap has some popular libraries such as reactJS and NodeJS. It is enough for me when designing from front-end to back-end.