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

Isaac · Accepted Answer · 2019-07-10 01:52:59Z

1

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

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

answered Jul 10, 2019 at 1:52

Isaac

13k18 gold badges66 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Mateo Over a year ago

Oh, error is gone but markers are still not showing.

kmplzz Over a year ago

missed return statement. if you won't write return, you can write something like that: array.map(item => <Marker ... />) or: array.map(item => (<Marker ... />))

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related