I'm currently facing an issue with a custom rendered column that contains a menu button. When I click on the menu button, it opens up a menu like this:
https://i.stack.imgur.com/4Lxd5.png
Now let's take a look at the code snippet below:
columns={[
{
title: 'Actions',
field: 'tableData.id',
render: rowData => {
return (
<div>
<IconButton aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
<MenuIcon />
</IconButton>
<Menu
className={classes.menu}
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem className={classes.sendMail} onClick={() => { console.log(rowData) }}>
<ListItemIcon className={classes.icon}>
<SendIcon fontSize="default" />
</ListItemIcon>
Send Assessment Email
</MenuItem>
</Menu>
</div>
)
},
},
The issue I'm facing is that when I click on the IconButton component, the values from the rows (rowData) are correct. However, when I click on the MenuItem, it only shows the last rowData value regardless of which row I select. Any assistance would be greatly appreciated. Thank you.
EDIT: I temporarily fixed this by storing the selected row in useState and using that value for other actions. I'm curious to know if there's a native or default solution for this rather than the workaround I used. I tried preventing event propagation but it didn't work as expected.