CODEWITHSUNDEEP
javascriptreactjsnext.jschakra-ui
Ibad Shaikh
Ibad Shaikh

Reputation: 3526

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

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

Upvotes: 13

Views: 10336

Answers (2)

Abdullah
Abdullah

Reputation: 2111

I use following approach which is better than destructuring.

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

Upvotes: 3

Praveenkumar
Praveenkumar

Reputation: 2182

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.

Upvotes: 35

Related Questions