CODEWITHSUNDEEP
reactjsgoogle-mapsgoogle-maps-api-3
escplat12
escplat12

Reputation: 2521

Geocoding a React state property using Google Maps Geocoding API

I'm trying to geocode one of the state props of my component using Google Maps Geocoding API. The value of the location is a string with the name of the city (ex. 'Stockholm'), and by using the geocoding API, I'm trying to transform it to geographic coordinates and update my Google Map.

However, I can't seem to work through this problem and I'am stuck at the TypeError: Cannot read property 'location' of undefined error.

This is my code:

import React, { Component } from 'react';

import BaseMap from './components/basemap.js';
import Card from './components/card.js';
import SearchBox from './components/search-box.js';

import GoogleMapReact from 'google-map-react';

import './index.css';

const google = window.google;
let geocoder = new google.maps.Geocoder();

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      avatar: '',
      username: 'bluejeans01',
      realName: '',
      location: '',
      followers: '',
      following: '',
      repos: '',
      address: geocoder.geocode({'address': this.state.location}, function(results, status) {
          if (status == 'OK') {
            this.setState({
              address: results.geometry.location
            })
          } else {
            alert('Geocode was not successfull because ' + status)
          }
        })
      }
  }

  render() {
    return (
      <div>
        <SearchBox fetchUser={this.fetchUser.bind(this)}/>
        <Card data={this.state} />
        <BaseMap address={this.state.address}/>
      </div>
    );
  }

  fetchApi(url) {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          avatar: data.avatar_url,
          username: data.login,
          realName: data.name,
          location: data.location,
          followers: data.followers,
          following: data.following,
          repos: data.public_repos,
        })
      });
  }

  fetchUser(username) {
    let url = `https://api.github.com/users/${username}`;

    this.fetchApi(url);
  }

  componentDidMount() {
    let url = `https://api.github.com/users/${this.state.username}`;

    this.fetchApi(url);
  }

}

export default App;

Please help!

Upvotes: 1

Views: 4174

Answers (1)

AlexVestin
AlexVestin

Reputation: 2586

Edit--- scratch that...

You need to wait until you have set a value for this.state.location before you can initialize this.state.address

Basically change the fetchrequest to:

fetchApi(url) {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          avatar: data.avatar_url,
          username: data.login,
          realName: data.name,
          location: data.location,
          followers: data.followers,
          following: data.following,
          repos: data.public_repos,
          address: [your function from the constructor])
        }
      });
  }

And use the data.location instead of the this.state.location, and set the value of address to "" in the constructor.

Upvotes: 1

Related Questions