how to use modal in reactstrap v.9 (bootstrap v.5)?

Question

I have a problem when using Reactstrap Modal https://reactstrap.github.io/?path=/docs/components-modal--modal

in the documentation it is using function noRefCheck(){}

but i don't know how to use the function

<div>
  <Button
    color="danger"
    onClick={function noRefCheck(){}}
  >
    Click Me
  </Button>
  <Modal toggle={function noRefCheck(){}}>
    <ModalHeader toggle={function noRefCheck(){}}>
      Modal title
    </ModalHeader>
    <ModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </ModalBody>
    <ModalFooter>
      <Button
        color="primary"
        onClick={function noRefCheck(){}}
      >
        Do Something
      </Button>
      {' '}
      <Button onClick={function noRefCheck(){}}>
        Cancel
      </Button>
    </ModalFooter>
  </Modal>
</div>

in the previous version i just use

const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);

<Modal isOpen={modal}>
 <ModalHeader toggle={toggle} />
   <ModalBody className='text-center'>
      <h5 className='mb-3'>Text Example</h5>
   </ModalBody>
</Modal>

only need to access the modal state to show or hide the modal. Anyone have solution?

Answer 1

I have found the solution basically just same as previous version on how to use

const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);

<Modal isOpen={modal}>
 <ModalHeader toggle={toggle} />
   <ModalBody className='text-center'>
      <h5 className='mb-3'>Text Example</h5>
   </ModalBody>
</Modal>

Thank you very much!