title: undefined is not an object (evaluating 'this.state.markers.map') render
body: <p>i got this type of error when i run my react-native component, please help me out</p>
  
  <p>undefined is not an object (evaluating 'this.state.markers.map') render
  undefined is not an object (evaluating 'this.state.markers.map')
  render
      c:\projects\myapp\src\components\home\hub.js:87:28
  
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1045:14
  measureLifeCyclePerf
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:85:11
  _renderValidatedComponentWithoutOwnerOrContext
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1045:8
  _renderValidatedComponent
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:1075:10
  performInitialMount
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:484:24
  mountComponent
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:346:40
  mountComponent
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6
  performInitialMount
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:496:6
  mountComponent
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:346:40
  mountComponent
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6
  mountChildren
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:264:10
  initializeChildren
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:74:41
  mountComponent
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:212:6
  mountComponent
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6
  performInitialMount
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:496:6
  mountComponent
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactCompositeComponent.js:346:40
  mountComponent
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactReconciler.js:62:6
  mountChildren
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\shared\stack\reconciler\ReactMultiChild.js:264:10
  initializeChildren
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\native\ReactNativeBaseComponent.js:74:41
  mountComponent
      c:\projects\myapp\node_modules\react-native\Libraries\Renderer\src\renderers\native\</p>
  
  <h2>this is my code:</h2>
  
  <pre><code> import React, { Component } from 'react';
  import {
  AppRegistry,
   StyleSheet,
  Text,
  View
  } from 'react-native';
  import MapView from 'react-native-maps';
  
  export default class Hub extends Component {
   constructor(props){
     super(props);
     this.state = {
     region: null,
     markers: null,
    mapStyle:null
   };
  }
  
  componentWillMount() {
   navigator.geolocation.getCurrentPosition(
     (position) =&gt; {
       console.log(position);
        this.setState({
         region: {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          latitudeDelta: 0.01,
          longitudeDelta: 0.01,
        },
        markers: {
          latlng: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
          },
          title: 'marker test',
          description: 'ta ta ra',
        },
      });
    }, (error) =&gt; {
      console.log(error);
      this.setState({
        region: {
          latitude: 21.035080,
          longitude: 105.793627,
          latitudeDelta: 0.01,
          longitudeDelta: 0.01,
        },
        markers: {
          latlng: {
            latitude: 21.035080,
            longitude: 105.793627,
          },
          title: 'marker test',
          description: 'ta ta ra',
        },
      });
    },
  );
  }
  
  
  onRegionChange = (region) =&gt; {
    this.setState({ region });
   }
  
  render() {
  
  const { region } = this.props;
  const { markers } = this.props;
  console.log(region);
  return (
    &lt;View style ={styles.container}&gt;
      &lt;MapView
        style={styles.map}
        region={this.state.region}
        onRegionChange={this.onRegionChange}
  
      &gt;
      {this.state.markers.map(marker =&gt; (
        &lt;MapView.Marker
          coordinate={marker.latlng}
          title={marker.title}
          description={marker.description}
        /&gt;
      ))}
      &lt;/MapView&gt;
    &lt;/View&gt;
  );
  }
  }
  </code></pre>