Brtdku

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);

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

  })});