react native maps populate markers from array - for-loop

Question

I am trying to render markers on the map dynamically with the end goal of markers being able to be created and destroyed at will while the application is running. Everything is working fine, except for one small section which is this:
for (j = 0; j < markersArray.length; j ++) {
console.log("Data: J=" + j + ", " + markersArray[j].key + ", " + markersArray[j].location[0] + ", " + markersArray[j].location[1] + ", " + markersArray[j].contactName);
return <MapView.Marker
key = { markersArray[j].key }
coordinate = {{
latitude: markersArray[j].location[0],
longitude: markersArray[j].location[1]
}}
title = { markersArray[j].contactName }
/>
}
The problem here is that the array has two or more objects inside it, but will only ever go through the loop once, where j = 0. It never goes through the loop another time. My thoughts are because the word "return" is used so that I can render the marker. Is there a way around this? All the data is perfect, it simply won't loop through more than the first time.
For the pedants among you who want the whole render function ;) :
render() {
return (
<MapContainer>
<MapView
style = { styles.map }
region = { this.state.mapRegion }
showsUserLocation = { true }
followUserLocation = { true }
onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }>
<MapView.Circle
key = { (this.state.currentLongitude + this.state.currentLongitude).toString() }
center = { userPosition }
radius = { RADIUS }
strokeWidth = { 1 }
strokeColor = { '#ffffff' }
fillColor = { 'rgba(210,218,215,0.5)' }
onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }
/>
{(() => {
console.log("Map Markers polling for data...");
if (markersArray[0] != null) {
console.log("Map Markers have found data");
for (j = 0; j < markersArray.length; j ++) {
console.log("Data: J=" + j + ", " + markersArray[j].key + ", " + markersArray[j].location[0] + ", " + markersArray[j].location[1] + ", " + markersArray[j].contactName);
return <MapView.Marker
key = { markersArray[j].key }
coordinate = {{
latitude: markersArray[j].location[0],
longitude: markersArray[j].location[1]
}}
title = { markersArray[j].contactName }
/>
}
}
})()}
</MapView>
<MessageBar />
</MapContainer>
)
}

Answer 1

I believe that you need map function in order to render every object in that array.
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
{markersArray[0] != null && markersArray.map((marker, index) => (
<MapView.Marker
key = {index}
coordinate = {{
latitude: marker.location[0],
longitude: marker.location[1]
}}
title = { marker.contactName }
/>
))
}