How to send card id to the menu items using reactjs? - reactjs

Question

My objective is to pass the id for handleClick function, If i click on the 3 dots of the respective card then it should reflect particular card id. Can anyone help me in giving id for handle Click arrow function.
Here is the code:
state = { menu: null };
handleClick = (e) => {
this.setState({ menu: e.target });
};
handleClose = () => {
this.setState({ menu: null });
};
{Data.map(user => (
<CardHeader
key={user.id}
className={classes.header}
avatar={<Avatar aria-label="recipe">R</Avatar>}
action={
<div className={this.state.menu && classes.menu}>
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={this.handleClick}
>
<MoreVertIcon />
</IconButton>
<Menu
style={{ marginTop: "35px" }}
id="simple-menu"
keepMounted
anchorEl={this.state.menu}
open={Boolean(this.state.menu)}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>View</MenuItem>
<MenuItem onClick={this.handleClose}>hide</MenuItem>
</Menu>
</div>
}
title={user.title}
subheader={user.subheader}
/>
))}
here is the sample one

Answer 1

You can bind the function and pass the id to it. Like
handleClick = (id, e) => {
console.log(id)
this.setState({ menu: e.target, id: id });
};
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={this.handleClick.bind(this, user.id)}
>
<MoreVertIcon />
</IconButton>
or instead of binding the function you can create a new arrow function and pass the id like this:
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={(e) => this.handleClick(user.id, e)}
>
<MoreVertIcon />
</IconButton>
You can save the id in states and then use it in the menu component to perform further actions

Answer 2

Here is a trick solution for that kind of situations. Also this is most performant solution. You won't need to create arrow function instance for every re-render or each React node.
<IconButton
id="simple-menu"
className={classes.showIcon}
aria-label="settings"
aria-controls="simple-menu"
onClick={this.handleClick}
data-user-id={user.id} // Define your user id as native data attribute
>
And then get data attribute of your current clicked element.
handleClick = (e) => {
const { userId } = e.currentTarget.dataset; // Get your data-user-id value as string
console.log(Number(userId));
this.setState({ menu: e.target, id: Number(userId) }); // Convert to number and save to state
};
So you can create your own scenarios up to your depends.
In this case, also you might want to learn event bubbling logic to understand the difference between target and currentTarget use case.
Also you can check it out for more information about data-* attributes.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes