How can I map multiple objects in an array to pass the value in React - JavaScript?

1

I have multiple coordinates like below

[
 {lat: 35.0606118, lng: 128.0654182},
 {lat: 35.8417043, lng: 127.1522446},
 {lat: 35.0884086, lng: 128.0935447}, 
 {lat: 35.1731054, lng: 128.0942915}
]

The above data is from props.locations. Therefore, I mapped this array into this. I am trying to show pins on Google Map using ‘@react-google-maps/api’. However, it does not show a single pin here.

     <GoogleMap
        id='map'
        mapContainerStyle={mapContainerStyle}
        zoom={8}
        center={center}
        options={options}
      >
        {props.locations.map((locations) => {
          <Marker
            position={{
              lat: location.lat,
              lng: location.lng,
            }}
            key={uuidv4()}
          />;
        })}
      </GoogleMap>
2

You are not calling the data properties with the same name you defined in the callback arg.

3

switched t locations but it doesn’t work as well

4

I found the problem! I was missing return()! But thank you so muhc anyway.

Screen Shot 2020-07-19 at 2.46.05 AM
Screen Shot 2020-07-19 at 2.46.05 AM1368×1302 252 KB

1 Like
5

Your callback function actually returning undefined not the component Marker. You should add return before <Marker … , or remove arrow function’s body bracket.

1 Like
6

I’d been working on it for 2 days trying to figure it out what I had done wrong. I’d just missed ‘return’ lol