title: getPlace function not working with Google Autocomplete in react
body: <p>I'm trying to recreate this Google autocomplete example in react:  <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform</a> </p>
  
  <p>I am using this tutorial to generate the higher order component needed to properly load the Google API:  <a href="https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/" rel="nofollow noreferrer">https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/</a></p>
  
  <p>The autocomplete functionality seems to be working just fine.  However, when I select a suggestion and try to run <code>fillInAddress()</code> this is the error message that I get:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'getPlace' of undefined
  </code></pre>
  
  <p>This is my code
  /components/GoogleApiComponent.jsx</p>
  
  <pre><code>import React from 'react';
  import {GoogleApiWrapper} from 'google-maps-react';
  import GoogleAutoComplete from '../components/GoogleAutoComplete';
  
  
  export class Container extends React.Component {
    render() {
      if (!this.props.loaded) {
        return &lt;div&gt;Loading...&lt;/div&gt;
      }
      return (
      &lt;div&gt;
        &lt;GoogleAutoComplete 
        /&gt;
      &lt;/div&gt;
  
      )
    }
  }
  
  export default GoogleApiWrapper({
    apiKey: 'somekey'
  })(Container)
  </code></pre>
  
  <p>../components/GoogleAutoComplete.jsx</p>
  
  <pre><code>import React from 'react';
  
  export default class GoogleAutoComplete extends React.Component {
    static propTypes = {
      }
    constructor(props) {
      super(props);
      }
  
      componentDidMount() {
        this.initAutocomplete();
      }
  
      initAutocomplete() {
        this.autocomplete = new google.maps.places.Autocomplete((this.refs.autoCompletePlaces), {types: ['geocode']});
  
        this.autocomplete.addListener('place_changed', this.fillInAddress);
  
  
      }
  
      geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            const geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
          });
        }
      }
  
      fillInAddress() {
  
        const componentForm = {
          street_number: 'short_name',
          route: 'long_name',
          locality: 'long_name',
          administrative_area_level_1: 'short_name',
          country: 'long_name',
          postal_code: 'short_name'
        };
      // Get the place details from the autocomplete object.
        const place = this.autocomplete.getPlace();
        for (let component in componentForm) {
          this.refs.component.value = '';
          this.refs.component.disabled = false;
        }
  
      // Get each component of the address from the place details
      // and fill the corresponding field on the form.
      for (let i = 0; i &lt; place.address_components.length; i++) {
        const addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
          const val = place.address_components[i][componentForm[addressType]];
          this.refs.addressType.value = val;
        }
      }
    }    
  
    render() {
      return (
        &lt;div&gt;
          &lt;div&gt;
            &lt;input 
              placeholder="Enter your address"
              onFocus={this.geolocate}
              ref="autoCompletePlaces"
            /&gt;
          &lt;/div&gt;
          &lt;table ref="address"&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;Street address&lt;/td&gt;
                &lt;td&gt;
                  &lt;input 
                    ref="street_number"
                    disabled="true"/&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;input 
                    ref="route"
                    disabled="true"/&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;City&lt;/td&gt;
                &lt;td&gt;
                  &lt;input 
                    ref="locality"
                    disabled="true"/&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;State&lt;/td&gt;
                &lt;td&gt;
                  &lt;input 
                    ref="administrative_area_level_1" 
                    disabled="true"/&gt;
                  &lt;/td&gt;
                &lt;td&gt;Zip code&lt;/td&gt;
                &lt;td&gt;
                  &lt;input
                    ref="postal_code"
                    disabled="true"/&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;Country&lt;/td&gt;
                &lt;td&gt;
                  &lt;input
                    ref="country" 
                    disabled="true"/&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;      
      );
    }
  }
  </code></pre>