Cannot read property 'latLng' of undefined

[tonystaark]

Hello I am trying to map through the markers to create multiple markers but have the following problem

Below is my code:

 this.state = {
  lat: 1.3521,
  lng: 103.8198,
  zoom: 11,
  addLat: 1.3521,
  addLng: 103.8198,
  data:[  
    {  
     "latitude":"1.3589783333",
     "is_on_trip":false,
     "id":5,
     "longitude":"103.752293000"
    },
    {  
     "latitude":"1.3492333333",
     "is_on_trip":true,
     "id":6,
     "longitude":"103.729582"
    },
    {  
     "latitude":"1.2894376666",
     "is_on_trip":true,
     "id":8,
     "longitude":"103.812434499"
    },
  ]
}

render() {
  const { lat, lng, zoom } = this.state;
  const Markers = this.state.data > 0 ? this.state.data.map(d => (
    <Marker key = {d.id}
      lat = {d.latitude}
      lng = {d.longitude}
      text="my marker"
      fontColor="red"
    />
  )) : 'Loading'

return (
  <div style={{ height: '100vh', width: '100%' }}>
    <GoogleMapReact
      bootstrapURLKeys={{ key: 'AIzaLyDEpqWPsg8vLUgdVdmzHKuZWW45h3mtZTI' }}  (fake!!)
      defaultCenter={{lat, lng}}
      center={[this.state.addLat, this.state.addLng]}
      defaultZoom={zoom}
      // onGoogleApiLoaded={({payload}) => this.redraw(payload)}
    >
      {Markers}
    </GoogleMapReact>
  </div>
)

}

Cant figure out why cant I map through the markers. Anyone can help? Or is this a bug?

[itsmichaeldiego]

@tonystaark It is not a bug but the way you're using React.

Check that, if no markers are present, you're rendering an string "Loading", which is not a React Component, you can only pass React Components as children of GoogleMapReact.

Also this is anti-pattern, if you don't render a component, you render a string? I know javascript is flexible but be respectful haha xD

Do this:

  const Markers = this.state.data.map(d => (
    <Marker 
      key = {d.id}
      lat = {d.latitude}
      lng = {d.longitude}
      text="my marker"
      fontColor="red"
    />
  ))

Hope it helps!

[tonystaark]

@itsmichaeldiego Thanks, yea i was trying to put a conditional there to check if the content in this.state.data has loaded from api. Didnt realize that rendering a string would break the react flow.