React-native - Loop through array and create markers on a map

Question

I'm new to react and js and the whole 'state' concept. Anyways, I'm trying to loop through an array of car dealers with the value lat, lng and boolean (open or not). This is what the code looks like now and I'm wondering how the MapView.Marker code should look for that to work. Thanks

  <MapView style={styles.map}
    region ={{
    latitude:40.758927,
    longitude:-73.984981,
    latitudeDelta: 0.1,
    longitudeDelta: 0.1,
 }}
 >
<MapView.Marker
  coordinate={{
    latitude:40.758927,
    longitude:-73.984981,
  }}
    title={'Ferrari dealer'}
    description={'Currently closed'}
    />

    </MapView>

Dan Abramov · Accepted Answer · 2018-04-22 18:55:06Z

3

Something like this:

let markers = this.state.cardDealers.map(dealer => (
  <MapView.Marker
    key={dealer.id}
    coordinate={{
      latitude: dealer.lat,
      longitude: dealer.lng,
    }}
    title={dealer.title}
    description={dealer.open ? 'Open' : 'Currently closed'}
  />
));

return (
  <MapView style={styles.map}
      region ={{
      latitude:40.758927,
      longitude:-73.984981,
      latitudeDelta: 0.1,
      longitudeDelta: 0.1,
   }}
  >
    {markers}
  </MapView>
)

You might find React documentation on lists and keys helpful.

answered Apr 22, 2018 at 18:55

Dan Abramov

269k87 gold badges417 silver badges523 bronze badges

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

Collectives™ on Stack Overflow

React-native - Loop through array and create markers on a map

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest