title: React, accessing a var from a script in a component
body: <p>I have been trying to import an external library (google Maps) in order to use it in a React component</p>
  
  <p><strong>index.html</strong> file </p>
  
  <pre><code>&lt;div id="app"&gt;&lt;/div&gt;
  &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_GOES_HERE&amp;callback=initMap" async defer&gt;
  </code></pre>
  
  <p><strong>react file</strong></p>
  
  <pre><code>  componentDidMount() {
      this.map = new google.maps.Map(this.refs.map, {
        center: {lat: this.props.lat, lng: this.props.lng},
        zoom: 8
      });   
    }
  
      render() {
        return &lt;div&gt;
          &lt;p&gt;I am a map component&lt;/p&gt;
          &lt;div id="map" ref="map"/&gt;
        &lt;/div&gt;
      }
  </code></pre>
  
  <p>The error I get is: </p>
  
  <blockquote>
    <p>Uncaught ReferenceError: google is not defined</p>
  </blockquote>
  
  <p>I have tried everything but nothing seems to be working. How do I access the variable from this script inside my component?</p>
  
  <p>This is just an example, please do not tell me to use one of the NPM packages for React Google Maps.</p>
  
  <p>Thanks,
  Harris</p>