Material-ui: Multiple Poppers on Google Maps show Only Current OnClick

[daiky00]

Hello I am trying to open one popper at the time. I am surprised there is not an example of this on the site. Right now all of them are opening onClick here is my code

  handleClick = (placement, id) => event => {
    const { currentTarget } = event;
    console.log(event)
    this.setState(state => ({
      anchorEl: currentTarget,
      open: state.placement !== placement || !state.open,
      placement,
    }));
  };

render() {
return (
<Paper>
  {surveyMapEvents && surveyMapEvents.length ? <div style={{ height: '600px', width: '100%' }}>
    <GoogleMapReact
      options={this.getMapOptions}
      bootstrapURLKeys={{ key: 'AIzaSyDVbG_3XsFZPYOenzXQ2lXYF56aVIkaya4' }}
      center={position}
      defaultZoom={15}
    >
      {surveyMapEvents.map((item, index) => (
        ( item.theme && 
          <MapMaker 
             aria-describedby={index} 
             key={index} 
             onClick={this.handleClick('top', index)}  
             background={item.theme.background} 
             color={item.theme.color} 
             lat={item.position.lat} 
             lng={item.position.lng}>
            <MapMakerText>{item.initial}</MapMakerText>
            <Popper id={index} open={open} anchorEl={anchorEl} placement={placement} transition>
              {({ TransitionProps }) => (
                <Fade {...TransitionProps} timeout={350}>
                  <Paper>
                    <DialogTitle>{item.name}</DialogTitle>
                  <DialogContent>
                    <DialogContentText><BoldText>Address:</BoldText> {item.address}</DialogContentText>
                    <DialogContentText><BoldText>Start at:</BoldText> {item.startTime}</DialogContentText>
                  </DialogContent>
                  <DialogActions>
                    <Button onClick={this.assign} color="primary">
                      Assign
                    </Button>
                    <Button onClick={this.delete} color="secondary">
                      Delete
                    </Button>
                    <Button onClick={this.details} color="default">
                      Details
                    </Button>
                  </DialogActions>
                  </Paper>
                </Fade>
              )}
            </Popper>
          </MapMaker> 

        )
      ))}
    </GoogleMapReact>
  </div> : <Loader />}
</Paper>
)
}

Here is Picture to reflect that I am always getting the same popper no matter on what Marker I click on Goggle Map

[oliviertassinari]

Looking at your code, it seems that you are opening all your Popiover at the same time. You should discriminate them. Please use StackOverflow for support questions like this one.

[daiky00]

@oliviertassinari Can you provide an example please?

[oliviertassinari]

Instead of using a boolean open state, you can use a string, set the same of the Popover you want to open. In the render method, only open the Popover if the name of the open state matchs. If you need more guidance, use StackOverflow with the material-ui tag.

[daiky00]

@oliviertassinari Thanks

[daiky00]

answer: https://stackoverflow.com/questions/54846189/multiple-poppers-on-google-maps-show-only-current-onclick