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...

Answer 1

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.