Necesito renderizar múltiples modales, pero la cantidad de modales no es fija y depende de los audios de propiedad del objeto que ingresa. Actualmente estoy usando el modo mui
Estas son las variables utilizadas:
const [open, setOpen] = useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); Y así es como intento representar los modales. Actualmente, el modal que se abre después de hacer clic en 'ver' solo muestra el último valor en los audios sin importar en qué botón 'Ver' haga clic
{audios.map((a) => ( <Grid item container justifyContent="flex-end"> <Button onClick={handleOpen} sx={{ color: 'blue', marginTop: '0.6rem', }} > View </Button> <Modal open={open} onClose={handleClose} > <Box sx={{ position: 'absolute' as 'absolute', top: '50%', left: '50%', p: 4, }} > <Typography color='white'>{a.name}</Typography> </Box> </Modal> </Grid> ))}¿Hay alguna forma de tener un estado separado para abrir y cerrar para cada modal?
Creo que deberías poner el estado 'abierto' en el componente Modal, de esta manera cada Modal tiene su propio estado.
const MyModalandButton=()=>{ const [open, setOpen] = useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return <> <Button onClick={handleOpen} sx={{ color: 'blue', marginTop: '0.6rem', }} > View </Button> <Modal open={open} onClose={handleClose} > </> }tal vez así