Opening Unique modal or popper based on button click - reactjs

Question

I am using material-ui library where I have a popper inside a loop each loop has one event object stored in cards. I want to open popper based on button click which is placed on each cards but all the popper gets opened since on button click I am setting 'open' state as true. I want to make this value unique for each popper so that I set the value for that popper which needs to be opened.
I tried to make open as unique but don't know how.
this.state = {
open: false,
}
handleClickButton = event => {
console.log(event.target)
this.setState(state => ({
open: !state.open,
}));
};
Here is the render method code:
{this.props.events.map((event) =>
(
<Card>
<CardContent>
<Typography variant="h5" component="h2">
{event.completionIntent.toUpperCase()}
</Typography>
<Typography color="textSecondary" gutterBottom>
<span><FontAwesomeIcon icon="clock"/></span>
</Typography>
<Typography component="p">
{event.eventTime}
<br />
</Typography>
</CardContent>
<CardActions>
<Link href={event.audio?"":null} style={{color:event.audio?'#3f51b5':'#bdbdbd', fontSize:'12px',}}
underline="none"
>
Download Audio
</Link>
<Button
id={event.completionIntent+'Button'}
buttonRef={node => {
this.anchorEl = node;
}}
variant="contained"
onClick={this.handleClickButton}
aria-describedby={event.completionIntent}
title="Send"
style={{backgroundColor:!event.audio && '#3f51b5',color:'#eeeeee',padding:'2px 0px', marginLeft:'14px', }}
disabled={event.audio}
>
Send
<Send className={classes.rightIcon}/>
</Button>
<Popper
id={event.completionIntent}
open={open}
anchorEl={this.anchorEl}
placement='bottom'
disablePortal={false}
className={classes.popper}
modifiers={{
preventOverflow: {
enabled: false,
boundariesElement:'scrollParent'
},
}}
>
<Paper className={classes.paper}>
<DialogTitle>{"Manual Task Updation"}</DialogTitle>
<DialogContent>
<DialogContentText>
Are you sure you want to update {event.completionIntent.toUpperCase()}?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClickButton} color="primary">
Disagree
</Button>
<Button onClick={this.handleClickButton} color="primary">
Agree
</Button>
</DialogActions>
</Paper>
</Popper>
</CardActions>
</Card>
</div>
))}
I want to open the popper only for one card where I clicked the button since open state variable is same for all popper then all popper gets opened. How to make it unique

Answer 1

It maybe too late, but i hope it will help someone out there.
You can use dom manipulation to do that.
In your button handler, set unique id:
<Button
...
onClick={() => this.handleClickButton(some-unique-id)}
...
>
...
</Button>
And then in your popper state:
<Popper
...
open={open[some-unique-id]}
...
>
...
</Popper>
And finally change your handler:
handleClickButton = (event,some-unique-id) => {
...
this.setState({
open: {
[some-unique-id]: true
}
});
};

Answer 2

Instead of making unique open values for all possible cards. It would be a better and simpler solution to make the card implementation as a seperate component. Each card would then have its own state, and you would only need one open value to handle the popper, thus seperating concerns.
So move the card into a seperate component, design some props that handles the data you need to pass down from the parent component, something like this:
{
this.props.events.map((event) =>
(<MyCustomCardImplementation key={someUniqueProperty {...myCustomCardProps} />)
}