react-native-maps conditional markers - react-native

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

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>
))}

Answer 2

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>
))
}