Displaying MapView markers from JSON API - json

Question

I am using React Native map view (https://github.com/react-native-community/react-native-maps) and have successfully got my map to display with manual markers. However, when I try to display my fetched JSON data markers I get constant syntax errors.
import MapView from 'react-native-maps'
import { Marker } from 'react-native-maps';
constructor(props) {
super(props);
this.state = {
myMarkers: []
};
}
componentDidMount() {
this.getMarkers();
}
getMarkers() {
axios
.get("MYAPISOURCE")
.then(response => {
this.setState({
myMarkers: response.data.responser
});
});
}
render() {
return (
<MapView style={styles.map}
rotateEnabled={false}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.04,
longitudeDelta: 0.05,
}}
>
{this.state.myMarkers.map((post, index)=> {
<MapView.Marker
key={post.ID}
coordinate={{
latitude:{post.lat},
longitude:{post.lng}}}
/>
})}
</MapView>
);
}
My Map View code which keeps getting syntax error: Unexpected tokens, expected "," in the coordinate function. I have tried so many different options but I cannot get the markers and map to work when I have my marker code.
HOWEVER If I run this code below outside of MapView, it successfully displays my data so my API call and myMarkers state is working and has the proper data:
{this.state.myMarkers.map((post, index)=> {
return (
<View key={index}>
<Text>
{post.lat},
{post.lat}
</Text>
</View>
)
})}
This displays the following:
37.78825, -122.4324
33.78825, -121.4324
31.78825, -124.4324

Answer 1

The data from the service is coming after the rendering(after the components render with empty values) so you need to use promise with state to render it once its ready.
examble:-
constructor(){
super(props);
this.state={dataIsHere:false};
}
dataSource()=>{
axios.<><><>.then((data)=>this.setState({dataIsHere:true}));
}
render(){
return(
...
//It will render markers once the data is ready
{this.state.dataIsHere?
this.state.myMarkers.map((post, index)=> {
<MapView.Marker
key={post.ID}
coordinate={{
latitude:{post.lat},
longitude:{post.lng}}}
/>
}):null}
...
)
}