React-map-gl: Popup won't remove

[soap-tastes-ok]

I successfully added a popup on my map, but I can't figure out how to close the popup. (I think it's a bug?)

I imported the Popup;

import MapGL, { Popup } from 'react-map-gl';

and defined the popup method like the following;

_renderPopup() {
  return(
    <Popup
      anchor="bottom"
      tipSize={10}
      longitude={this.state.popupInfo.lon}
      latitude={this.state.popupInfo.lat}
      closeButton={true}
      closeOnClick={true}
      >
        <div style={style_popup}>
          <p> lon = {this.state.popupInfo.lon} </p>
          <p> lat = {this.state.popupInfo.lat} </p>
        </div>
    </Popup>
  );
}

which I rendered like this;

render() {
  const {viewport, data, popupInfo} = this.state;
    return (
      <MapGL
        {...viewport}
        {...this.props}
        onViewportChange={this._onViewportChange.bind(this)}
        mapboxApiAccessToken={MAPBOX_TOKEN}
        mapStyle={MAP_STYLE}
      >
        {this._renderPopup()}
      </MapGL>
    );
  }
}

It renders properly and the close button is on the popup. It just won't close. Any ideas? :/

[Pessimistress]

@soap-tastes-ok All react-map-gl components are stateless. You still need to subscribe to the onClose event and rerender without the popup. See the source code of this example.

[davechan813]

@soap-tastes-ok

Just do this:

<MapGL
  onClick={() => this.setState({ popupInfo: null })}
  className={classes.map}
  mapStyle={mapStyle}
  {...this.state.viewport}
  onViewportChange={this._onViewportChange}
  mapboxApiAccessToken={MAPBOX_KEY}
>
  // your code
</MapGL>