React Native, TypeError: undefined is not an object When it is

Question

React Native is saying Undefined is not a object when it CLEARLY IS A OBJECt!! I am confused on whats going on.

Look at the following code. Browse down to the render() function. See the following... console.log(cords.coords);

console.log(cords.coords); outputs the following...

08:37:22: Object {
08:37:22:   "coords": Object {
08:37:22:     "accuracy": 5,
08:37:22:     "altitude": 0,
08:37:22:     "altitudeAccuracy": -1,
08:37:22:     "heading": -1,
08:37:22:     "latitude": 39.946313,
08:37:22:     "longitude": -82.810829,
08:37:22:     "speed": -1,
08:37:22:   },
08:37:22:   "timestamp": 1522413346644.865,
08:37:22: }

One would say that to retrive this data you would have to do the following. console.log(cords.coords.coords.latitude) to get the latitude. but it says its undefined. It says its undefined even if I do console.log(cords.coords.coords) ? What am I doing wrong ?

Note console.log(cords.coords); is where the error is being triggered in the script

Keep in mind that the following code does work. only when I change console.log(cords.coords); to console.log(cords.coords.coords.latitude); it breaks

import React, { Component } from 'react';
import {Platform, StyleSheet, Dimensions, Text, View } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import { Constants, Location, Permissions } from 'expo';

export default class MapScreen extends Component<Props> {
 constructor(props) {
    super(props);
    this.state = {
      markers: [{
        title: 'hello',
        coordinates: {
          latitude: 39.946313,
          longitude: -82.810829
        },
      },
      {
        title: 'hello',
        coordinates: {
          latitude: 39.945838,
          longitude: -82.813018
        },  
      }
     ]
    }
    console.log("Get Geo Synce");
    this._getLocationAsync();
  }

  _getLocationAsync = async () => {
    console.log("load geo sync");
    //Location.setApiKey("AIzaSyBY45685CkDPy5a4ss29IL2ZjIvTvYTMyk");
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        locationResult: 'Permission to access location was denied',
      });
    }
    console.log("Loading Location 1");
    let location = await Expo.Location.getCurrentPositionAsync({ enableHighAccuracy: true });
    console.log("Retrieved Location");
    this.setState({ coords: location });
  };
  
  render() {
    const { params } = this.props.navigation.state;
    let coords = params ? params.coords.coords : null;
    let cords = this.state;
    console.log(cords.coords);
    //let coords = state.locationResult.coords;
    return (
          <View style={{flex: 1}}>
            <MapView
                style={ styles.container }
                initialRegion={{
                    latitude:coords.latitude,
                    longitude:coords.longitude,
                    latitudeDelta:0.0992,
                    longitudeDelta:0.0421,
                }}
            >
              {this.state.markers.map(marker => (
                <MapView.Marker 
                  coordinate={marker.coordinates}
                  title={marker.title}
                />
              ))}
            </MapView>
          </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
      width:'100%',
      height:'100%',
  },
});

Answer 1

It's better to make API requests once the component mounts in componentDidMount life cycle method and the problem with your code is, on initial render this.state.coords is undefined right and once the API request is resolved this.state gets updated with this.setState method and this.state.coords is defined. So to make it work try this,

 return this.state.coords instanceof Object ? (
      <View style={{flex: 1}}>
        <MapView
            style={ styles.container }
            initialRegion={{
                latitude:coords.latitude,
                longitude:coords.longitude,
                latitudeDelta:0.0992,
                longitudeDelta:0.0421,
            }}
        >
          {this.state.markers.map(marker => (
            <MapView.Marker 
              coordinate={marker.coordinates}
              title={marker.title}
            />
          ))}
        </MapView>
      </View>
) : <Text>Fetching, Please wait....</Text>;