title: How can I remove an existing <Marker> component from <Map> in react js?
body: <p>I have the following return :</p>
  
  <pre><code>import {Map, Marker} from 'google-maps-react';
  class SimpleMap extends Component{ 
    constructor(props) {
      super(props);
      this.state = {
          marker: {
              available: false,
              position: {
                  lat: lathere,
                  lng: lnghere
              }
          }
      };
    }
    onClick = (t, map, coord) =&gt; {
        const {latLng} = coord;
        let {marker} = this.state;
        marker.position.lat = latLng.lat();
        marker.position.lng = latLng.lng();
        this.setState({marker});
  };
    render(){
    const {marker} = this.state;
    return (&lt;Map
       google={this.props.google}
       zoom={8}
       initialCenter={{position here}}
       onClick={this.onClick}&gt;
          &lt;Marker position={marker.position}/&gt;
    &lt;/Map&gt;);
  }}
  </code></pre>
  
  <p>How can I remove the current marker when I click again on the map? I've searched for some solutions but in each of them there were objects instantiated with <code>new google.maps.map</code> &amp; <code>new google.maps.marker</code>  saved as global variables and use reference from one to another so they could remove the marker's map. How can I do that in ReactJS? </p>