Using the map function in React Native

Question

I am trying to render markers on a MapView for each position stored inside my state array called markers, but for some reason when I try to reference the state inside the map function I get undefined. I checked for syntax errors but couldn't find the problem. Basically every time a user changes his/her location I want to set their marker to their new location. The error occurs when trying to use the map function inside the render() function. I have posted a picture of the error below.

import React, {Component} from 'react';
import {AppRegistry,Text,View,StyleSheet} from 'react-native'
import Component1 from`enter code here` './Component1'
import Component3 from './Component3'
import Component4 from './Component4'
import MapView from 'react-native-maps'

export default class myapp extends Component{
  constructor(props){
    super();
    this.state ={
      markers: [
        {
          watchId: 0,
          latitude:3,
          longitude:2
        },
        {
          watchId: 2,
          latitude:3,
          longitude:2
        }
      ]

    }
  }

  componentDidMount(){
    navigator.geolocation.watchPosition((position)=>{
      var lat = parseFloat(position.coords.latitude)
      var long = parseFloat(position.coords.longitude)
      var id = parseFloat(position.coords.watchId)
      var found = false
      this.setState({markers: this.state.markers.map(marker =>{
        if(marker.watchId === id){
          found = true
          marker.latitude = lat
          marker.longitude = long
        }
      })});
    if(found === false){
      this.setState({markers:[{watchId:id,latitude:lat,longitude:long}]});
    }
    },null,{timeout:0,distanceFilter:0})
}
  render(){
    return(
      <View>
      <MapView style={{height:350,width:350,marginTop:300,alignSelf:'center'}}
      initialRegion={{
        latitude: 37.33,
        longitude: -121.4024,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
      showsUserLocation={true}
      followsUserLocation={true}
      showsMyLocationButton={true}
      >
      {this.state.markers.map(marker =>{
        return(
                <MapView.Marker
                coordinate={{latitude:marker.latitude,longitude:marker.longitude}}
                title={"title"}
                description={"description ey"}

             />
        );
      })}

      </MapView>
      </View>

    );
  }
}
AppRegistry.registerComponent('myapp',()=>myapp);

Jordan Daniels · Accepted Answer · 2019-01-19 00:56:49Z

1

You need to return the marker in componentDidMount.

For example:

 this.setState({markers: this.state.markers.map(marker =>{
    if(marker.watchId === id){
      found = true
      marker.latitude = lat
      marker.longitude = long
    }
    return marker
  })});

answered Jan 19, 2019 at 0:56

Jordan Daniels

5,3241 gold badge23 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Using the map function in React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related