如何打开和关闭反应引导模式？

Question

I'm new to react and I'm working with react-bootstrap. I have a perfectly working react app with 2 components and I'm using function components. Here is the code.

App.js

function App() {
  const [modalShow, setModalShow] = useState(false);

  return (
    <>
      <Button variant="primary" onClick={() => setModalShow(true)}>
        Launch vertically centered modal
      </Button>

      <MyVerticallyCenteredModal
        show={modalShow}
        onHide={() => setModalShow(false)}
      />
    </>
  );
}

MyVerticallyCenteredModal.js

export default function MyVerticallyCenteredModal(props) {
    return (
        <Modal
            {...props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    Modal heading
            </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <h4>Centered Modal</h4>
                <p>
                    Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
                    dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
                    consectetur ac, vestibulum at eros.
            </p>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={props.onHide}>Close</Button>
            </Modal.Footer>
        </Modal>
    );
}

At this stage, my code is working fine. But I need to make a few changes. I need to remove show and onHide props from MyVerticallyCenteredModal component and access props from Modal component. Here is what I did,

App.js

<MyVerticallyCenteredModal />

MyVerticallyCenteredModal.js

<Modal
  show={modalShow}
  onHide={() => setModalShow(false)}
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
>
...
</Modal>

Now I'm getting a compile error,

'modalShow' is not defined
'setModalShow' is not defined

But without moving useState from App.js to MyVerticallyCenteredModal.js how can I do it?

Answer 1

The onClick(); should take an event as for controlling mouse click:

 onClick={(e) => {setModalShow(false)}};

Same for onHide();

Note: you can also use the word 'event' instead of the letter 'e'

Answer 2

The states is controlled from the Parent Component <App/> and the button that launches the Modal is in the App component.

  <Button variant="primary" onClick={() => setModalShow(true)}>
    Launch vertically centered modal
  </Button>

So, it is not possible to control the Modal behaviour from the Modal itsef.

But yes if you directly render your Modal in the <App/> Component itself without using a Parent Component for rendering of Modal. Then this can be done.

We will need a small button inside the modal component and use state in Modal itself to control that:)