Unable to use two modals on same page using useDisclosure() in ChakraUI

Question

There is a custom hook useDisclosure() provided by chakraUI which returns isOpen, onClose , onOpen.

  const { isOpen, onOpen, onClose } = useDisclosure()

The onOpen is passed to the onClick of the button which is triggered to open the modal.

<Modal isOpen={isOpen} onClose={onClose}>
  ...Modal Code...
<Modal/>

<Button onClick={onOpen}>
  button
<Button/>

Now I want to make another modal (lets say reportModal) on same page. For that I wrote the same code where I renamed variables while destructuring useDisclosure().

const {
        isOpen: { isOpenReportModal },
        onOpen: { onOpenReportModal },
        onClose: { onCloseReportModal },
      } = useDisclosure()

Further, I used the same flow by passing these renamed variables to and component but id didn't work.

Anyone for its solution? Thanking in advance...

score 28 · Accepted Answer · answered Jan 22 '21 at 09:59

You have to rename the variables like this.

 const { 
    isOpen: isOpenReportModal, 
    onOpen: onOpenReportModal, 
    onClose: onCloseReportModal 
} = useDisclosure()

Now this should work. What you have tried is like destructuring again. Which is wrong.

score 0 · Answer 2 · answered Jul 25 '23 at 10:25

I use following approach which is better than restructuring.

function MyApp() {
  const modal1 = useDisclosure()
  const modal2 = useDisclosure()
  
  return (
    <>
      <Button onClick={modal1.onOpen}>Open Modal 1</Button>
      <Button onClick={modal2.onOpen}>Open Modal 2</Button>

      <Modal isOpen={modal1.isOpen} onClose={modal1.onClose}>
        // modal body
      </Modal>
      
      <Modal isOpen={modal2.isOpen} onClose={modal2.onClose}>
        // modal body
      </Modal>
    </>
  )
}

Source

Unable to use two modals on same page using useDisclosure() in ChakraUI

2 Answers2