Consider a User component which displays the details of a user. It receives two props, name and email.
We have another component say, Organization, which has the administrator details of the organization:
We need to display the administrator details inside the Organization component.
We can achieve this requirement by passing the admin details to the User component like this:
Here we have passed the properties of admin to the User component one by one:
What if the User component had a long list of props like name, email, age, gender and so on?
It would be tiring to list the props one by one.
To solve this issue, JSX allows us to copy the object properties to the props of a component by using the ES6 spread operator:
Here is another case where we can utilize the above spread syntax to avoid code repetition:
In this example, we are passing each variable name to the prop. Instead of repeating the prop name and variable name, we can pass the variables by spreading an object like this:
At Bigbinary, we follow this approach to increase code readability.
One thing to note here is that the object properties and prop names should be the same to pass it using the spread operator.
If the prop name and variable name are different, we need to add them separately to the props list: