I am tyring to map an object that looks like this:
['note_title_test', 'note_title_test2', 'note_title_test32', 'note_title_test232', 'test title', 'testing1']
Here is my map function:
{results.map((note, idx) => {
console.log(results);
return(
<Grid container spacing={0}>
<Grid item sm={11} md={11} lg={11}>
<ListItemButton className={classes.list} key={idx} onClick={(idx) => handleList(note, idx)} selectedindex={idx}>
<ListItemText key={idx} primary={note} secondary="date"/>
</ListItemButton>
</Grid>
<Grid key={idx} item sm={1} md={1} lg={1}>
<IconButton
className={classes.tagButton}
onClick={handleClick}
aria-controls="basic-menu"
aria-haspopup="true"
aria-expanded={open ? open : undefined}
>
<LabelIcon className={classes.listTag}/>
</IconButton>
<Menu
id={idx}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem id={idx} onClick={() => changeLabel(note, "#00AF54")}>
<Box sx={{ width: "2vh", height: "2vh", backgroundColor: "#00AF54"}}
>
</Box>
<p>green</p>
</MenuItem>
</Menu>
</Grid>
</Grid>
When I click on the MenuItem, the desired outcome is just logging the correct note title, however, every MenuItem outputs the last item in the object ('testing1') instead of the item that I am clicking on.
I've gone over my code all morning but haven't been able to figure out. Am I missing something?
I solved it! I didn't pass the note to the handleClick function, so it always opened menu for the same item, which was the last item in the list.
Before:
<IconButton
className={classes.tagButton}
onClick={handleClick}
aria-controls="basic-menu"
aria-haspopup="true"
aria-expanded={open ? open : undefined}
>
After:
<IconButton
className={classes.tagButton}
onClick={(e) => handleClick(e, note)}
aria-controls="basic-menu"
aria-haspopup="true"
aria-expanded={open ? open : undefined}
>
And the handleClick function now looks like this:
const handleClick = (event, note) => {
setAnchorEl(event.currentTarget)
setNoteTitle(note)
};
And the