Send data from array of objects to component

Question

GOAL: Render 3 SearchItem components from locations[0].results[0] and 3 SearchItem components from locations[0].results[1]

I have an array of objects who's data I want to render in my SearchItem component:

const locations = [
    {
      results: [
        { name: "Rome, Italy", price: 100, distance: 1299, match: 96 },
        { name: "Beijing, China", price: 200, distance: 3000, match: 93 },
        { name: "California, USA", price: 250, distance: 420, match: 75 },
      ],
    },
    {
      results: [
        { name: "Rome, NY", price: 100, distance: 1299, match: 96 },
        { name: "Spain", price: 200, distance: 3000, match: 93 },
        { name: "California, USA", price: 250, distance: 420, match: 75 },
      ],
    },
  ];

And here is how I'm passing data via props to the component:

  {locations[0].results.map((location, index) => {
            return <SearchItem locations={locations[0].results[index]} />;
          })}

Now, when I console log in my SearchItem component only ```location[0].results[0] is printing.

Here is my SearchItem component:

function SearchItem({ locations }) {
  console.log(locations);
  return (
    <SearchItemsContainer>
     {location.name}
    </SearchItemsContainer>
  );
}

Any idea what I'm doing wrong?

gandharv garg · Accepted Answer · 2021-05-18 20:02:17Z

1

Try the below code

{locations[0].results.map((location) => <SearchItem location={location} />)}

function SearchItem({ location }) {
  console.log(location);
  return (
    <SearchItemsContainer>
     {location.name}
    </SearchItemsContainer>
  );
}

answered May 18, 2021 at 20:02

gandharv garg

2,2211 gold badge14 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

crispengari · Accepted Answer · 2021-05-18 20:14:59Z

0

Try this:

{locations[0].results.map((location, index) => {
            return <SearchItem locations={location}  key={index} />;
})}

answered May 18, 2021 at 20:14

crispengari

9,5518 gold badges59 silver badges69 bronze badges

Collectives™ on Stack Overflow

Send data from array of objects to component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related