React Native Render an Object using map : undefined is not an object (evaluating 'currentLocation.coords')

Question

I have a variable called currentLocation which is an object that I get from the navigator.geolocation.getCurrentPosition() method.

{"timestamp":1575687610918,"mocked":false,"coords":{"altitude":0,"heading":0,"longitude":72.9815203,"latitude":19.2076923,"speed":0,"accuracy":35.90299987792969}}

My question is how do I render it in a React Native app using map? I am getting the error : undefined is not an object (evaluating 'currentLocation.coords'). I want to be able to map over this object and simply display the data as text! I am new to React Native so any help would be greatly appreciated. Thank you!

Following is the code :

export default class HomeScreen extends React.Component {
  constructor(props) {
        super(props)      
        this.state = 
        {
            currentLocation : '',
        }
    }
  async componentDidMount() {

    var location
    setInterval(() => {

    navigator.geolocation.getCurrentPosition(
    position => {
        location = JSON.stringify(position)
        //console.log(location)
        this.setState({ location })
    },

    error => Alert.alert(error.message),
    { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }

    );
    this.setState({ currentLocation : location })    
    }, 1000)    
    }   

  render() {
    var { currentLocation } = this.state
    if(typeof(currentLocation) != undefined)
    console.log('Inside render =========> ', currentLocation.coords)

        return (


  )     
  } 
}

I don't quite understand. You want to map over this object and display the data? Or do you want to use that data and show it on google maps.? — Atin Singh, Dec 07 '19 at 03:41
I want to be able to map over this object and simply display the data as text! Editing the question. — sublime_archon, Dec 07 '19 at 03:44

Atin Singh · Accepted Answer · 2019-12-07T05:45:23.840

1

You want to loop over an object and display the data as text.You can use the Object.keys() for that.

Here's how to do it -

const p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.keys(p).map((i) => {
  console.log(i, p[i])  // i will be the key of object and p[i] will be the value of 
   key//
   //return jsx using the above logic//
})

You can check out other ways to loop over an object here - How do I loop through or enumerate a JavaScript object?

Hope this helps you.

EDIT: - The error is because your state is not an object. It's a string because you did this

location = JSON.stringify(position)

You can remove this stringify or inside render you can do

 const currentLocation = JSON.parse(this.state.currentLocation)

edited Dec 07 '19 at 05:45

answered Dec 07 '19 at 03:56

Atin Singh

3,624
2
18
25

currentLocation.coords.map( coordinate => console.log(coordinate.longitude)) Is this the right way to do it just so I can print it on the console? – sublime_archon Dec 07 '19 at 04:01
No.. `currentLocation.coords` is an object itself. You need to use Object.keys over it as well. – Atin Singh Dec 07 '19 at 04:04
1

`currentLocation.coords.Object.keys((i) => console.log(currentLocation.coords[i]))` This is the correct way. – Atin Singh Dec 07 '19 at 04:06
I'm getting the error 'undefined' is not an object (evaluating 'currentLocation.coords') – sublime_archon Dec 07 '19 at 04:46
@sublime_archon Your main object that you mentioned in your question is currentLocation right? Can you console.log(currentLocation.coords)? – Atin Singh Dec 07 '19 at 04:54
@sublime_archon I have added an Edit which should work. – Atin Singh Dec 07 '19 at 05:45
I still git an undefined for this.state.currentLocation.coords.longitude – sublime_archon Dec 07 '19 at 06:00

score 0 · Answer 2 · answered Dec 07 '19 at 03:43

0

You are probably looking for a package like this https://github.com/react-native-community/react-native-maps. You can use MapView Component to render maps on your react-native app and use the Marker component to pin the current location. I think the documentation can help you.

answered Dec 07 '19 at 03:43

Suvodip Mondal

93
1
1
6

That's not what he asked for. – Atin Singh Dec 07 '19 at 03:56

score 0 · Answer 3 · answered Dec 07 '19 at 05:07

If it's object

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';


let obj = {"timestamp":1575687610918,"mocked":false,
"coords":{"altitude":0,"heading":0,"longitude":72.9815203,
"latitude":19.2076923,"speed":0,"accuracy":35.90299987792969
}}

export default class App extends React.Component {
  render() {
    const  {timestamp, coords } = obj;
    return (
      <View>
        <Text>{timestamp}</Text>
        <Text>{coords.latitude}</Text>
        <Text>{coords.longitude}</Text>
      </View>
    );
  }
}

if it's array of objects

let arr = [{"timestamp":1575687610918,"mocked":false,
"coords":{"altitude":0,"heading":0,"longitude":72.9815203,
"latitude":19.2076923,"speed":0,"accuracy":35.90299987792969
}}]
export default class App extends React.Component {
  render() {
    return (
      <View>
       {arr && arr.map(a=>
       <View key={Math.random()*10000}>
        <Text>{a.timestamp}</Text>
        <Text>{a.coords.latitude}</Text>
        <Text>{a.coords.longitude}</Text>
        </View>
       )}
     </View>
    );
  }
}

React Native Render an Object using map : undefined is not an object (evaluating 'currentLocation.coords')

3 Answers3