Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

84
Views
When I press the first button, the first modal works. When I press the second button, the second modal works

I have two grids, and in each grid I have a button that I would like to have its own unique modal. Whenever I try using Bootstrap's modals' however, I am only getting the first button's data to show up, even though I may be clicking on a different button that should display a different modal.

import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
        
export default function myApp() {
    return(
        <div>
            <button className="mybutton" onClick={handleOpen}>Download</button>
            <Modal
                open={open}
                onClose={handleClose}
            >
                <Box sx={style}>
                    <Typography id="my-modal" variant="h6" component="h2">
                        Download
                    </Typography>
                    <Typography id="my-modal" sx={{ mt: 2 }}>
                        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
                    </Typography>
                </Box>
            </Modal>
     
            <button className="mybutton" onClick={handleOpen}>Download</button>
            <Modal
                open={open}
                onClose={handleClose}
            >
                <Box sx={style}>
                    <Typography id="my-modal" variant="h6" component="h2">
                        Download here
                    </Typography>
                    <Typography id="my-modal" sx={{ mt: 2 }}>
                        <img src="https://wallpaperaccess.com/full/145444.jpg"/>
                    </Typography>
                </Box>
            </Modal>
        </div>
    )
}
7 months ago ยท Juan Pablo Isaza
Answer question
Find remote jobs