How to Use Spread Operator to Pass All Props in React

Web developers love React because it allows them to create a reusable component and avoid writing unnecessary code. However, reusing components is not just sticking a variable name that stores a specific element to avoid repetition.

The component system in React is advanced and allows you to customize the inner content, appearance, and even functionality of child components. It is possible thanks to the props object, which is used to pass down values from parent to children.

This article describes how to pass all props to children and handle an unpredictable number of values passed through props within child components.

Use Spread (...) Operator to Pass All props

The spread syntax is a new feature in JavaScript. It has different functionality when used with arrays, strings, and objects. In this case, we use the props object to pass down values from the parent to the child.

The spread syntax is simple. Let’s imagine you have an object with multiple properties:

const obj {
    propertyOne: 1,
    propertyTwo: 2,
    propertyThree: 3,
    propertyFour: 4
}

You can copy all the key-value pairs in another object by using three dots (...):

const copy = {...obj}

When using props, the props object stores all properties you want to pass down manually. If you have a separate props object, you can simply use the same spread syntax to copy all the values of the existing object and pass it down.

Let’s look at an example below:

export default function App() {
  const props = { firstName: "Irakli", lastName: "Tchigladze" };
  return (
    <div className="App">
      <Hello {...props} />
    </div>
  );
}

function Hello({ firstName, lastName }) {
  return (
    <div>
      <h1>Hello, {firstName + " " + lastName}</h1>
    </div>
  );
}

This way, we don’t have to set attributes for the <Hello> component one by one. Instead, all of the properties of the props object will be made available in the child component. For example, see the output for the above code fence below.

Output:

Hello, Irakli Tchigladze

Pass Down All props Excluding One

You can also pass down some values of the props object but exclude one or two properties.

export default function App() {
  const props = { size: 20, firstName: "Irakli", lastName: "Tchigladze" };
  const { size, ...other } = props;
  return (
    <div className="App" style={{ fontSize: size }}>
      <Hello {...props} />
    </div>
  );
}

function Hello({ firstName, lastName }) {
  return (
    <div>
      <h1>Hello, {firstName + " " + lastName}</h1>
    </div>
  );
}

In this example, our props object has three properties - size, firstName, and lastName.

We use destructuring to safely consume the size property to style our elements (specify the font size). But we can still pass down the rest of the properties to the <Child> component.