Multiple modal handle in react-js

Question

I am new here and I saw some related answer but it will use another package and class components, i have functional component and use MUI Dialog for popup but the functionality is only for one modal but I have many modal my code

    import React from 'react'
    import Image from '../../assets/images/banner1.png'
    import Dialog from '@mui/material/Dialog';
    import DialogActions from '@mui/material/DialogActions';
    import DialogContent from '@mui/material/DialogContent';
    import DialogContentText from '@mui/material/DialogContentText';
    import DialogTitle from '@mui/material/DialogTitle';
    import Button from '@mui/material/Button';
    
    export default function Popups() {
      const [open, setOpen] = React.useState(false);
    
      const handleClickOpen = () => {
        setOpen(true);
      };
    
      const handleClose = () => {
        setOpen(false);
      };
      return (
           <div className='image-data-grids'>
                    <div className='image-and-data-section'>
                        <img onClick={handleClickOpen} className='image-data-grid-image' src={Image} alt='Img' />
                    </div>
                    <Dialog
                      open={open}
                      onClose={handleClose}
                      aria-labelledby="alert-dialog-title"
                      aria-describedby="alert-dialog-description"
                    >
                   
                      <DialogContent>
                        <DialogContentText id="alert-dialog-description">
                          Content1
                        </DialogContentText>
                      </DialogContent>
                      <DialogActions>
                        <Button onClick={handleClose}>Disagree</Button>
                      </DialogActions>
                    </Dialog>
<div className='image-and-data-section'>
                        <img onClick={handleClickOpen} className='image-data-grid-image' src={Image} alt='Img' />
                    </div>
                    <Dialog
                      open={open}
                      onClose={handleClose}
                      aria-labelledby="alert-dialog-title"
                      aria-describedby="alert-dialog-description"
                    >
                     
                      <DialogContent>
                        <DialogContentText id="alert-dialog-description">
                          content2
                        </DialogContentText>
                      </DialogContent>
                      <DialogActions>
                        <Button onClick={handleClose}>Disagree</Button>
                      </DialogActions>
                    </Dialog>
                </div>
      )
    }

here handleClickOpen and handleClose are the function for open and close for single modal, i have multiple modals. how customize these two function for multiple modal, i am new in react please help me to solve this issue, Thanks in advance

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community
– Community Bot, Commented Jun 4, 2022 at 19:59

D3Portillo · Accepted Answer · 2022-06-04 20:10:18Z

4

I know you are talking about having multiple state dependencies within a Component. I think you can do this

function StackOverflow() {
  // We create a state dep that holds all our modals open/close state
  const [myModals, setMyModals] = useState({
    modalA: true,
    modalB: false,
  })

  // This will return an api in which we can toggle, close or open a modal
  // ie: set the boolean to true or false 
  const getModalHanlder = (modalName) => {
    return {
      isOpen: myModals[modalName],
      open: () => setMyModals((state) => ({ ...state, [modalName]: true })),
      close: () => setMyModals((state) => ({ ...state, [modalName]: false })),
      toggle: () =>
        setMyModals((state) => ({ ...state, modalA: !state[modalName] })),
    }
  }

  const modalA = getModalHanlder("modalA")
  // Here we invoke our function and pass on the desired modal prop name from 
  // which we desire to create an api 
  

  // We can then create this for another modal, modalB
  const modalB = getModalHanlder("modalB")
  return (
    <div>
      <b>MODAL_A: {`${modalA.isOpen}`}</b>
      <br />
      <button onClick={modalA.toggle}>TOGGLE</button>
      <button onClick={modalA.close}>CLOSE</button>
      <button onClick={modalA.open}>OPEN</button>
    </div>
  )
}

This is one approach another one can be to create an state for each modal, like

const [isOpenModalA, setIsOpenModalA] = useState(false)
// And this for each modal state

A fancy one can be to use a hook as useReducer and update each modal state that depends on actions you dispatch, https://reactjs.org/docs/hooks-reference.html#usereducer

answered Jun 4, 2022 at 20:10

D3Portillo

3442 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

manoop m Over a year ago

more than two modal this is possible

D3Portillo Over a year ago

Any , just add modalC, modalD, modalN to initial useState({ modalN: false }) And then to get api, modalN = getModalHandler("modalN");

aero8991 Over a year ago

thanks this was very helpful. I have 3 modals on my NextJS page and using your ModalHandler strategy saved me a of state management.

Collectives™ on Stack Overflow

Multiple modal handle in react-js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related