Force loading script on React.js, how?

Question

JavaScript

Hello!
Wrote a simple tab script in React.js. According to his idea, he had to open maps on Google Api. However, in order to open another map, apparently, the script must call the Google Api again.
Probably easier to show than to explain.
You can see what is now on Codepen here .
The script loads the first map from the World section. But after trying to open other tabs when changing the div id, the new map does not load.
Advise how it is possible in this case to force React.js to call the script again. Well, or just how to make the whole thing work.
Thank you.

Answer 1

<script type="text/javascript">
  google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});

  function drawVisualization() { ... }
</script>

This piece of code generally stands alone. We need to integrate it ... Let's start!
First of all, let's put the drawVisualization function in our js file:

function drawVisualization(element, commonData, regionData) {
  console.log('elemet', element);
  var data = google.visualization.arrayToDataTable(commonData);
  var mapVisualization = new google.visualization.GeoChart(element);
  mapVisualization.draw(data, regionData);
}

And we slightly modify the main file:

<script type="text/javascript">
  google.load('visualization', '1.1', {packages: ['geochart']});
</script>

Then we define the component that will draw the map:

class MapVisualization {

  componentDidMount() {
    this.drawMap();
  }
  
  componentDidUpdate() {
    this.drawMap();
  }
  
  drawMap() {
    drawVisualization(this.refs.mapDiv.getDOMNode(), this.props.commonData, this.props.data);
  }

  render() { 
    return (
      <div ref="mapDiv" />
    );
  }
};

Ready. We put all the data in the props of the Tabs component and then change its render:

render() {
      var list = this.props.data.map(function(d, i) { return <button type = "button" className = { 'tab' + (i === this.state.current ? ' active' : '') } key = { 'tab-' + i } onClick = { this.handleClick.bind(this, i) }>{d.title}</button>
      }.bind(this));

      const { commonData, data } = this.props;
      const { current } = this.state;
      return (         
        < div className = 'container' >
          <div className='col-12'>
              {list}
              <div className = 'map'>
                <MapVisualization data={data[current].content} commonData={commonData} />
              </div>
          </div>
        </div>
      );
    }

Instead of a link, I use a button of course .
End result
This is certainly far from ideal, but as I understand it, you started react not long ago - so it will go

Answer 2

The problem is that at the time of receiving data from the Google api, these elements do not exist, that is, due to the fact that the react and api map components exist independently of each other. I would look towards integrating them with let's say https://github.com/tomchentw/react-google-maps