React, accessing a var from a script in a component

Question

I have been trying to import an external library (google Maps) in order to use it in a React component

index.html file

Answer 1

A little late to the party but I also had this issue and for me it was caused by eslint. To disable it just add the comment /*global google*/ above where you declare the variable and it should work e.g.

  componentDidMount() {
    /*global google*/ // To disable any eslint 'google not defined' errors
    this.map = new google.maps.Map(this.refs.map, {
      center: {lat: this.props.lat, lng: this.props.lng},
      zoom: 8
    });   
  }

    render() {
      return 

        
I am a map component
        

      
    }

You can also use the window object to make the call:

  componentDidMount() {
    /* Use new window.google... instead of new google... */
    this.map = new window.google.maps.Map(this.refs.map, {
      center: {lat: this.props.lat, lng: this.props.lng},
      zoom: 8
    });   
  }

    render() {
      return 

        
I am a map component
        

      
    }