Reactjs Datamap wrapper

datamap.react.js

import React, { Component } from "react";
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import Datamap from 'datamaps'
import API from '../../../../api/MapKey';

class Map extends Component {
  constructor( props ) {
    super( props )

    this.state = {
      datamap : null
    }
    this.datamaps = null 
    this.element = React.createRef()
  }

  componentDidMount() {
    this.renderDataMaps( 'world' )

    
  }

  renderDataMaps( scope ) {
    let existing = document.querySelectorAll( '.datamap' )
    
    existing.forEach( node => node.parentNode.removeChild( node ) )
    this.setState({ datamap : new Datamap({ element : this.element.current, scope }) })
  }

  render() {
    return(
      <div ref={ this.element } style={ { height : '500px', width : '500px' } }>

      <button onClick={ this.renderDataMaps.bind( this, 'usa' )}>Show USA</button>
      </div>
    )
  }
}

export default Map;