react-native-maps conditional markers

Question

I have a map of markers that renders each marker in an array of coordinates. I am trying to render markers conditionally based on a key I give the marker. You can see exactly how I am trying to do this by looking at my snack example here or I have posted the code below.

Thank you, I appreciate it more than you know.

export default class Map extends React.Component {
  markers = [];
  state = {
    coordinates: [
      {
        name: '1',
        latitude: 36.212111515965525,
        longitude: -81.67527588876025,
        status: 'busy',
      },
      {
        name: '2',
        latitude: 36.21754431261142,
        longitude: -81.68598350040361,
        status: 'open',
      },
      {
        name: '3',
        latitude: 36.21744712906634,
        longitude: -81.68168562889075,
        status: 'busy',
      },
      {
        name: '4',
        latitude: 36.219352000280495,
        longitude: -81.68559146421954,
        status: 'open',
      },
    ],
  };

  render() {
    return (
      <View style={{ ...StyleSheet.absoluteFillObject }}>
        <MapView
          style={styles.map}
          provider={PROVIDER_GOOGLE}
          showsUserLocation={true}
          showsMyLocationButton={true}
          ref={(map) => (this._map = map)}
          initialRegion={{
            latitude: 36.212111515965525,
            longitude: -81.67527588876025,
            latitudeDelta: 0.05,
            longitudeDelta: 0.05
          }}>
          {this.state.coordinates.map((marker, index) => (
            if(marker.status == 'busy'){
            <Marker
              key={marker.name}
              ref={(ref) => {this.markers[index] = ref;}}
              onPress={() => this.onMarkerPress(marker, index)}
              coordinate={{
                latitude: marker.latitude,
                longitude: marker.longitude,
              }}>
              <Image
                source={require('./assets/blueMarker.png')}
                style={{ height: scale(50), width: scale(50) }}
              />
            </Marker>
            } else {
               <Marker
              key={marker.name}
              ref={(ref) => {this.markers[index] = ref;}}
              onPress={() => this.onMarkerPress(marker, index)}
              coordinate={{
                latitude: marker.latitude,
                longitude: marker.longitude,
              }}>
            </Marker>
            }


          ))}
        </MapView>
      </View>
    );
  }
}

Answer 1

Here, In JSX we are allowed to render components only.

If We have to render something conditionally, we can use ternary operators for that.

Here I can see in the code that you have used If...Else...

Solution for your code:

{
    this.state.coordinates.map((marker, index) => (
        marker.status == 'busy'
        ?
            <Marker
                key={marker.name}
                ref={(ref) => {this.markers[index] = ref;}}
                onPress={() => this.onMarkerPress(marker, index)}
                coordinate={{
                latitude: marker.latitude,
                longitude: marker.longitude,
                }}>
                <Image
                source={require('./assets/blueMarker.png')}
                style={{ height: scale(50), width: scale(50) }}
                />
            </Marker>
        :
            <Marker
                key={marker.name}
                ref={(ref) => {this.markers[index] = ref;}}
                onPress={() => this.onMarkerPress(marker, index)}
                coordinate={{
                latitude: marker.latitude,
                longitude: marker.longitude,
                }}>
            </Marker>
    ))
}

Answer 2

You're not using correct JSX syntax. You can't use if-then-else, use ternary operator instead.

{ this.state.coordinates.map((marker, index) => (
  marker.status == 'busy' ?
  <Marker
    key={marker.name}
    ref={(ref) => {this.markers[index] = ref;}}
    onPress={() => this.onMarkerPress(marker, index)}
    coordinate={{
      latitude: marker.latitude,
      longitude: marker.longitude,
    }}>
    <Image
      source={require('./assets/blueMarker.png')}
      style={{ height: scale(50), width: scale(50) }}
    />
  </Marker>
  :
  <Marker
    key={marker.name}
    ref={(ref) => {this.markers[index] = ref;}}
    onPress={() => this.onMarkerPress(marker, index)}
    coordinate={{
      latitude: marker.latitude,
      longitude: marker.longitude,
    }}>
  </Marker>
))}