Material Table inner onClick shows only last row value

Question

So the problem I am having is that I have a custom rendered column inside which there is a menu button clicking on it open a menu like this:

Now look at below code:

  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 values coming in from the rows i.e rowData is fine on the first onClick of IconButton component but the second onClick of MenuItem shows only the last rowData value no matter which row i select. Any help would be appreciated. Thank you.

EDIT: I have deployed a quick fix by setting the selected row on Menubutton inside useState and then using that value for the other actions but i wanna know if that is natively or shall i say possible on default rather then the approach i took . i tried stopping event propagation but in vain.

Answer 1

Thanks for asking this questions and seeing that I'm not completely alone...

I am not sure if this could serve as a solution or as a work around, but it works for me.

1. On the button being used to open the menu, I use the onClick event to set the selected menu row which I want to use, and save it to the component state.

    const [slcRow, setSlcRow] = React.useState(null);
    const handleClick = (event, row) => {
        setAnchorEl(event.currentTarget);
        setSlcRow(row);
    };

    <Button 
        aria-controls="simple-menu" 
        aria-haspopup="true" 
        onClick={(event ) => {handleClick(event, row) }}
        >
        Open Menu
    </Button>

2. In the MenuItem onClick event I check the state to retrieve that row and do the work needed...

   const handleEditOpen = (event) => {
       let row = slcRow;
       loadEditData(row.clientId);
       setEdit(true);
       setAnchorEl(null);
   };

   <Menu id="long-menu" anchorEl={anchorEl} keepMounted open={open} onClose={handleClose1}>
       <MenuItem onClick={(event) => { handleEditOpen(event) }}>Edit </MenuItem>
   </Menu