Map through array of objects and pass props to specific component

Question

Here is my array:

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

Now, I want to take the lat and lng coordinates and pass them as props this component:

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

And here is the actual components code:

<MapMarkerContainersContainer>
      {locations.map((location, index) => {
        return (
          <AnyReactComponent
            lat={location.result[index].lat}
            lng={location.result[index].lng}
            text="My Marker"
          />
        );
      })}
    </MapMarkerContainersContainer>

Any idea what I'm doing wrong?

What is happening/not happening that is different from what you expect? Please add that information to your question. — Matt Morgan
– Matt Morgan, Commented May 18, 2021 at 22:25

A1rPun · Accepted Answer · 2021-05-18 22:39:30Z

2

You are using the index of the locations array. So instead of using location.result[index] you could reduce all the locations.result 's inside the locations array and loop over the results:

<MapMarkerContainersContainer>
{
  locations
    .reduce((acc, cur) => [...acc, ...cur.results], [])
    .map((location) => {
      return (
        <AnyReactComponent
          lat={location.lat}
          lng={location.lng}
          text="My Marker"
        />
      );
    })
}
</MapMarkerContainersContainer>

edited May 18, 2021 at 22:39

answered May 18, 2021 at 22:27

A1rPun

17k8 gold badges60 silver badges93 bronze badges

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

Comments

windmaomao · Accepted Answer · 2021-05-18 22:32:03Z

2

You have array inside array, so you can first flat them out.

  const marks = []
  locations.forEach(v => {
    v.results.forEach(i => { mark.push(i) })
  })

And then

      {marks.map(m => 
          <AnyReactComponent
            key={`${m.lat}${m.lng}`}
            lat={m.lat}
            lng={m.lng}
            text="My Marker"
          />
      })}

You need key, or you will get errors.

answered May 18, 2021 at 22:32

windmaomao

7,7322 gold badges37 silver badges38 bronze badges

Comments

TopW3 · Accepted Answer · 2021-05-18 22:30:25Z

1

You need to flatten the array before calling map.

<MapMarkerContainersContainer>
    {locations.reduce((prev, cur) => [...prev, ...cur.results], []).map((location, index) => {
        return (
            <AnyReactComponent
                lat={location.lat}
                lng={location.lng}
                text="My Marker"
            />
        );
    })}
</MapMarkerContainersContainer>

answered May 18, 2021 at 22:30

TopW3

1,5371 gold badge10 silver badges14 bronze badges

Collectives™ on Stack Overflow

Map through array of objects and pass props to specific component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related