Как добавить React- bootstrap Modal, когда веб-страница открыта каждый раз

Question

Как добавить React- bootstrap Модально, когда веб-сайт открыт каждый раз, модель всегда должна всплывать в центре с деталями и возможностью закрытия модели.

Я пробовал этот подход, но он не удается:

 const Modals = (props) => {

  const [modalShow, setModalShow] = useState(true);

  const handleClose = () => setModalShow(false);

  return (
    <div>

     <Modal
        show={modalShow}
        onHide={handleClose}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
                Public Notice
    </Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <p>
                Dear Friends and Mandir Devotees.
            </p>
        </Modal.Body>
        <Modal.Footer>
            <Button onClick={handleClose}>Close</Button>
        </Modal.Footer>
    </Modal>

   </div>
  );
};

export default Modals;

Answer 1

В ваших Модалах. js

const Modals = (props) => {

  const [modalShow, setModalShow] = useState(true);

  const handleClose = () => setModalShow(false);

  return (
    <div>

     <Modal
        show={modalShow}
        onHide={handleClose}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
                Public Notice
    </Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <p>
                Dear Friends and Mandir Devotees.
            </p>
        </Modal.Body>
        <Modal.Footer>
            <Button onClick={handleClose}>Close</Button>
        </Modal.Footer>
    </Modal>

   </div>
  );
};

export default Modals;

Использование Модалов. js в вашем Приложении. js

render(){
  <Modals />
}