CODEWITHSUNDEEP
javascriptreactjsgoogle-maps
Cunha
Cunha

Reputation: 35

ReactJS Failed to compile: 'Objects' is not defined no-undef

Can someone help me what is missing on my code? I'm trying to do this for a couple hours and error after error....

The objective is to fetch all objects coordinates into GoogleMaps Markers...

(Newbie at reactJS)

class maps extends Component{

    constructor(props){
        super(props)

        this.state = { Objects: [] }
    }

render(){

   {this.state.Objects.location.coordinates.map((item, i) => (
     <Marker position= {{ lat: Objects[i].location.coodinates[0], lng: Objects[i].location.coordinates[1] }}/>
    ))} 

    const MyMapComponent = withScriptjs(withGoogleMap((props) =>

    <GoogleMap
      defaultZoom={2}
      defaultCenter={{ lat: 40.6333333, lng: -8.65 }} 
    >

    </GoogleMap>
  ))

    return(
        <div>
        <MyMapComponent
        isMarkerShown
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnQmNcHpzoytzm02Zf-inD6xxTdSRJdLg&v=3.exp&libraries=geometry,drawing,places"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        />
        </div>
    )
}

componentDidMount(){

                axios.get('https://api.ost.pt/traffic_events/?key=VMSBvXtmOixXVuaHqeyAxDEhQkbnJpXZBYjDufEu').then( response => {

                    const { Objects } = response.data
                    console.log(Objects)
                    this.setState({Objects}) 

                })      
                .catch(error => {
                    console.log('Error fetching and parsing data', error); 
                });

            }

}

These are the objects.coordinates from api data that I need to fetch

Any hint will be appreciated. Thanks a lot!

Upvotes: 3

Views: 5645

Answers (2)

Arber Sylejmani
Arber Sylejmani

Reputation: 2108

This is wrong:

{this.state.Objects.location.coordinates.map((item, i) => (
    <Marker position= {{ lat: Objects[i].location.coodinates[0], lng: Objects[i].location.coordinates[1] }}/>
))}

because you are mapping over this.state.Objects.location.coordinates, and you are using the index to access Objects[i].location.coodinates[0] and Objects[i].location.coordinates[1], and Objects isn't defined anywhere, but this.state.Objects is.

I'm guessing you meant something like this:

 {this.state.Objects.map((item, i) => (
        <Marker position= {{ lat: item.location.coodinates[0], lng: item.location.coordinates[1] }}/>
    ))}

Here's an example of how to list the Lat/Long for each Object: http://jsfiddle.net/g4hr5jnc/

You just replace it with the Google maps components

Upvotes: 1

Sywale
Sywale

Reputation: 1

I think the problem is that the code run constructor(props) first, then render() then componentDidMount(). Thus, when you run render() the this.state.Objects is still an empty array.
You may wanna try:
1. write whatever in componentDidMount() in to constructor(props)
2. change componentDidMount() to componentWillMount()

more about react component lifecycle:
http://busypeoples.github.io/post/react-component-lifecycle/

Upvotes: 0

Related Questions