I need to render multiple modals but the number of modals are not fixed and depend on property audios of the object coming in. I'm currently using the mui modal
This is the variables used:
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
And this is how I attempt to render the modals. Currently, the modal that opens after clicking 'view' only shows the last value in audios no matter which 'View' button I click on
{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>
))}
Is there way to have separate state for open and close for each modal?
I think u should put the 'open' state in the Modal component , by this way every Modal have their own state .
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}
> </>
}
maybe just like this