CODEWITHSUNDEEP
javascriptreactjsecmascript-6
kimo26
kimo26

Reputation: 111

Spread operator to pass all other props to a component. React.js

I'm having trouble understanding the spread operator when I want to pass all other props to a component.

Any help would be appreciated.

import React, { Fragment } from "react";
import SiteCard from "./SiteCard";

const SiteList = ({ sites }) => {
  return (
    <Fragment>
      {sites.map((site) => {
        return (
          <SiteCard
            key={site.login.uuid}
            image={site.picture.large}
            firstName={site.name.first}
            lastName={site.name.last}
            city={site.location.city}
            country={site.location.country}
            sensors={site.dob.age}
            otherSiteProps={...site} // how can I pass the site props here?
          />
        );
      })}
    </Fragment>
  );
};

export default SiteList;

Upvotes: 2

Views: 3332

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You just need to write:

<SiteCard
  key={site.login.uuid}
  image={site.picture.large}
  firstName={site.name.first}
  lastName={site.name.last}
  city={site.location.city}
  country={site.location.country}
  sensors={site.dob.age}
  {...site} // how can I pass the site props here?
/>

But wait, why you're making so complicated? You can just use:

<SiteCard {...site} />

Now, in your SiteCard component use required props.

And if I were you, I would not have separated SiteCard component for this scenario. I would just write:

{sites.map((site) => {
  return (
    // everything here I will utilize in html.
  );
})}

Upvotes: 4

Mario Petrovic
Mario Petrovic

Reputation: 8312

You are almost there with the solution.

You need to pass it as otherSiteProps={{...site}}. This is if you want to pass site as an object to otherSiteProps property of SiteCard.

If you want to spread site and have multiple props for component SiteCard you do it like this:

<SiteCard
  key={site.login.uuid}
  image={site.picture.large}
  firstName={site.name.first}
  lastName={site.name.last}
  city={site.location.city}
  country={site.location.country}
  sensors={site.dob.age}
  {...sites}
/>

This in case that sites is an object. If site is an array, this wont work.

Upvotes: 3

Related Questions