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?

I think that `noRefCheck(){}` acts just as placeholder. And you should replace it with `toggle` function as in your code from previous version (plus set the `isOpen={modal}`). — Břetislav Hájek, Nov 14 '21 at 04:42
thank you @BřetislavHájek i have found the solution. i updated the question — Gerry, Nov 15 '21 at 11:16
@Gerry, you can post the solution as a separate answer. Not everyone reads comments! — Saber, Feb 20 '22 at 22:52

score 1 · Accepted Answer · answered Feb 22 '22 at 02:06

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!

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

1 Answers1