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

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

Use the spread syntax (...) to pass an object as props to a React component, e.g. <Person {...obj} />. The spread syntax will unpack all of the properties of the object and pass them as props to the specified component.

App.js

Copied!
function Person({name, age, country}) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Person {...obj} />
    </div>
  );
}

We used the spread syntax (...) to pass an object's properties as props to a component.

An easy way to think about this syntax is that we're unpacking the properties of the object in places where zero or more key-value pairs are expected.

App.js

Copied!
const obj2 = {...{a: 1, b: 2}};

console.log(obj2); // 👉️ {a: 1, b: 2}

Now the Person component can destructure and use all of the passed props.

If you pass the entire object as a prop, you would have to access the properties on the object in the child component.

App.js

Copied!
function Person({data}) {
  return (
    <div>
      <h2>{data.name}</h2>
      <h2>{data.age}</h2>
      <h2>{data.country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Person data={obj} />
    </div>
  );
}

Notice that the Person component now accesses the properties on the data object.

You can get around this by destructuring one level deeper in its props object.

App.js

Copied!
function Person({data: {name, age, country}}) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Person data={obj} />
    </div>
  );
}

Now we don't have to access every property on the data object even though the parent component passes an entire object as a prop.

If your object is not stored in a variable and is passed inline, you would have two sets of curly braces when passing the object as a prop.

App.js

Copied!
function Person({data}) {
  return (
    <div>
      <h2>{data.name}</h2>
      <h2>{data.age}</h2>
      <h2>{data.country}</h2>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <Person data={{name: 'Alice', age: 29, country: 'Austria'}} />
    </div>
  );
}

The outer set of curly braces wraps the expression and the inner set is the actual object prop.

You can also pass individual properties on the object as props to the child component.

App.js

Copied!
function Person({name, age, country}) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Person name={obj.name} age={obj.age} country={obj.country} />
    </div>
  );
}

The benefit of doing that is - you can omit some of the object's properties that are not required in the child component.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

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

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

Borislav Hadzhiev