Estoy tratando de mapear un objeto que se ve así:
['note_title_test', 'note_title_test2', 'note_title_test32', 'note_title_test232', 'test title', 'testing1']Aquí está mi función de mapa:
{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>Cuando hago clic en MenuItem, el resultado deseado es simplemente registrar el título de nota correcto; sin embargo, cada MenuItem genera el último elemento en el objeto ('testing1') en lugar del elemento en el que estoy haciendo clic.
He repasado mi código toda la mañana pero no he podido descifrarlo. ¿Me estoy perdiendo de algo?
¡Lo resolví! No pasé la nota a la función handleClick, por lo que siempre abrió el menú para el mismo elemento, que era el último elemento de la lista.
Antes:
<IconButton className={classes.tagButton} onClick={handleClick} aria-controls="basic-menu" aria-haspopup="true" aria-expanded={open ? open : undefined} >Después:
<IconButton className={classes.tagButton} onClick={(e) => handleClick(e, note)} aria-controls="basic-menu" aria-haspopup="true" aria-expanded={open ? open : undefined} >Y la función handleClick ahora se ve así:
const handleClick = (event, note) => { setAnchorEl(event.currentTarget) setNoteTitle(note) };Y el