reactstrap Modal appearing as plain text

Question

I use reactstrap Modal but somehow when isOpen is true, the modal just appears as plain text instead of a box shown over the window. When I use the same Modal code to run a new component, the Modal is still rendered as happened so it is not the CSS. How should I modify my Modal

function App() {
  const [people, setPeople] = useState(data);
  const [modalOpen, setModalOpen] = useState(false);

  const toggle = () => {
    setModalOpen(!modalOpen);
    console.log(modalOpen)
  }
  return (

    <main>
      <section className="container">
        <h3>
          {people.length} birthday today
        </h3>
        <List people={people} />
        <button onClick={() => setPeople([])}>
          Clear All
        </button>
        <button onClick={() => setModalOpen(!modalOpen)}>
          Add birthday
        </button>
        <Modal isOpen={modalOpen} toggle={toggle} className="modal">
          <ModalHeader toggle={toggle}>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={toggle}>Do Something</Button>{' '}
            <Button color="secondary" onClick={toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </section>
    </main>
  )
}

Answer 1

You have to import bootstrap stylesheet like this import "bootstrap/dist/css/bootstrap.min.css"; (and install bootstrap if you haven't) and remove modal class name from Modal component. Here's CSB example