Being able to share all props from parent to child component in React lets you easily break your app up into small components. Here’s how to pass all of the React props at the same time.

Dr. Derek Austin 🥳

Follow

Nov 27, 2020 · 5 min read

Passing Props from Parent to Child in React

When you have a React component who received some props (“properties”) from its parent component, and you want to pass all of those props on to this component’s child, then you need to pass the entire props object.

If you happen to know all of the props, then you could pass them all by just listing them out individually as the new props for the child component.

Let’s look at a code example of a ParentComponent that passes all of its props to two child components, DisplayAllProps and ChildComponent.

If you don’t know what the props are or don’t want to type them all out, then instead use the ... spread operator to pass all props simultaneously.

Here’s that same ParentComponent, except now it passes all of its props to its two child components without specifying the props individually:

Each of the child components above receives all of the props passed into ParentComponent from its parents (in this case, from an App component).

The spread operator {...props} “spreads out” the properties of the props’ object as arguments (and thus, props) for each child component.

In the App, the React props passed to ChildComponent are name="Johnny", job="👨‍🎤", and a text string ("🌟") as the children (props.children):

Here is the resulting React app, where ParentComponent has sent all of its props to its two child components, DisplayAllProps and ChildComponent:

For reference, here is the code for the ChildComponent:

And to display the props as a table, I made a DisplayAllProps component, which uses Object.entries() to take a look at the React props object:

As you can see, I use the ... spread operator repeatedly in order to pass all of the React props together from each parent component to its child.

Live Demo: How to Pass All React Props

If you’d like to play around with passing all props in a real React app, I used the above JSX code to make this live demo over at CodeSandbox:

Feel free to modify the code yourself until you feel comfortable using the spread operator (...) for passing around all props in a simple React app.

Passing All Props from a Class Component

Throughout this tutorial, I’ve been using React function components. If you’re using ES6 class components instead, then you’ll need to add the this keyword before you reference props in the parent component.

Apart from the this keyword, you pass the entire props object from parent to child in exactly the same way for both function and class components.

In other words, {...props} will become {...this.props} to pass the entire props object from parent to child when the parent component is a class component. Nothing changes in the child component that receives the props, as those props are just arguments to the render function (render(props)).

Conclusion: Use {…props} to Pass All React Props

There are great reasons you might want to specify and otherwise limit the props you pass around in React, but sometimes you want to pass them all.

However, it’s tedious and error-prone to list all of the props individually when passing them from parent to child, if you even know them all in the first place. Instead, to pass all React props from parent to child at once, you need to take advantage of the spread operator (...).

“Spread syntax (...) allows […] an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.” — MDN Docs

The spread operator lets you pass the entire props object to a child component as that child’s props object. (Technically, you are passing all of the key-value pairs from the parent’s props object as arguments to render(props).)

The best part about using the spread operator to pass props around in React is that you can add any other props to the child if you need to. You can even overwrite the existing props — depending on whether you place {...props} before or after any new props that you specify on the child component.

(To overwrite props, you’d put {...props} first and then add the props that you want to overwrite afterwards in the list of props for ChildComponent.)

I hope this tutorial has been useful to you in understanding how you can pass the entire React props object from parent component to child component.

Happy coding! 🤝💸🎧💙🎓

Join my email list to get free access to all of my Medium articles.