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?

CodePudding user response：

       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

CodePudding user response：

I think u should put the 'open' state in the Modal component , by this way every Modal have their own state .