Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Can you change the state of two components with one button

I’m trying to create an onboarding or three modal series with React + MUI. Basically after the button within the modal is clicked it will go to the next modal. I’ve looked at packages but they are complex for my use case. What’s the best way to accomplish this? I can try updating the current state of modal to close and updating another modal state to open at the same time, is that possible?

    const [open, setOpen] = React.useState(false);
        
    const [openTwo, setOpenTwo] = React.useState(false);
        
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false).setOpenTwo(true);
    
    <Modal
    open={openTwo}
onClose={handleClose}>
{Modal content here
</Modal>

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Youre implicitly returning setOpen(false) with your arrow function in handleClose(), you can read more about arrow functions here, but the important bit is

if the body requires additional lines of processing, you'll need to re-introduce braces PLUS the "return" (arrow functions do not magically guess what or when you want to "return"):

since you are calling setOpen, and setOpenTwo you don’t need to return anything though

const handleClose = () => {
    setOpen(false)
    setOpenTwo(true)
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading