In a React project, I have the requirement of opening Modal from another ponent. I found suggested questions from StackOverflow but, not yet convinced. As I need to make the Modal ponent reusable across all ponents. See the code below for reference

Homepage.js

const HomePage = () => {
  return (
    <>
      <button onClick={() => setLoginModalShow(true)}>Open Modal</button>
    </>
  );
};

I created the below file to export other files too, and make it useful in other ponents

monLogin.js

import LoginModal from "./LoginModal";

export const setLoginModalShow = (props) => {
  console.log("PROPS", props);
  return <LoginModal showModal={props} />;
};

And here is the Modal ponent

const LoginModal = (props) => {
  const [loginModalShow, setLoginModalShow] = useState(props.showModal);

  console.log("PROPS in MODAL", props);
  return (
    <>
      <Modal
        show={loginModalShow}
        onHide={setLoginModalShow}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">Logout</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Are you sure to Logout?</h4>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={() => setLoginModalShow(false)}>Cancel</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

Please refer to the code sandbox link: . After you visit the page click on the 'Open Modal' button

In a React project, I have the requirement of opening Modal from another ponent. I found suggested questions from StackOverflow but, not yet convinced. As I need to make the Modal ponent reusable across all ponents. See the code below for reference

Homepage.js

const HomePage = () => {
  return (
    <>
      <button onClick={() => setLoginModalShow(true)}>Open Modal</button>
    </>
  );
};

I created the below file to export other files too, and make it useful in other ponents

monLogin.js

import LoginModal from "./LoginModal";

export const setLoginModalShow = (props) => {
  console.log("PROPS", props);
  return <LoginModal showModal={props} />;
};

And here is the Modal ponent

const LoginModal = (props) => {
  const [loginModalShow, setLoginModalShow] = useState(props.showModal);

  console.log("PROPS in MODAL", props);
  return (
    <>
      <Modal
        show={loginModalShow}
        onHide={setLoginModalShow}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">Logout</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Are you sure to Logout?</h4>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={() => setLoginModalShow(false)}>Cancel</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

Please refer to the code sandbox link: https://codesandbox.io/s/nameless-cdn-70zuq. After you visit the page click on the 'Open Modal' button

• javascript
• reactjs

1 Answer 1

You want to control the show/hide from the parent ponent

const HomePage = () => {
  const [showLogin, setShowLogin] = useState(false);
  return (
    <>
      <button onClick={() => setShowLogin(true)}>Open Modal</button>
      <LoginModal show={showLogin} close={() => setShowLogin(false)} />
    </>
  );
};

<Modal
        show={props.show}
        cancel={props.close}
...

Here is a working example:

https://codesandbox.io/s/nice-euclid-d0dw0