How to Pass All Props to a Child Component in React

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.

Photo by Kay on Unsplash

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.

View raw code as a GitHub Gist

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.