react-native-maps: Loading Marker Dynamically : Array is not a function

Question

I was able to get the object containing the coordinates of the markers. However, when rendering it, I got the error as the title says.

try {
            const value = await AsyncStorage.getItem('@myData')
            if(value !== null) {
              const parseData = JSON.parse(value);
              const llat = parseFloat(parseData[0].location[0].lat);
              const llon = parseFloat(parseData[0].location[0].lon);
              const locs = parseData[0].location;
              const markersS = [];
              for (let i =0; i < locs.length; i++){
                    markersS.push({
                        coordinate: {
                           latitude: parseFloat(locs[i].lat),
                           longitude: parseFloat(locs[i].lon)
                        }
                    })
              }
              this.setState({
                lat : llat,
                lon :llon,
                region: {
                    latitude: llat,
                    longitude: llon,
                    latitudeDelta: 0.015,
                    longitudeDelta: 0.0121
                },
                location : locs,
                ready: true,
                markers: markersS
              },()=>{

                  alert(JSON.stringify(this.state.markers))

              })
            }
          } catch(e) {
            alert(e)
          }

Then render like this:

{this.state.ready && this.state.markers !=null && this.state.markers((item, index) => {
                    <Marker
                         coordinate = {item.coordinate}
                         pinColor = {'blue'}
                         description = {'Home Address'}
                     />

                    })
                }

I expect to load the markers on the map

Answer 1

Problems is with this.state.markers((item, index) => {. You should be using map function as below instead

this.state.markers.map((item, index) => {
...