Open new model inside of a modal in React-CodePudding

I'm quite beginner for React applications. What i need is, i have a sign in modal link on my navbar. It works perfectly. But inside of that modal, i have a sign up modal link. When i press it, both modals closes immediately. Here is an example code that what i wrote,

SignInModal.js

 import { Fragment, useState } from "react";
    import { Link } from "react-router-dom";
    import { Modal, Button } from "react-bootstrap";
    import SignUpModal from "./SignUpModal";
    
    const SignInModal = () => {
      const [signIn, setSignIn] = useState(false);
      const [signUp, setSignUp] = useState(false);    
      const handleClose = () => setSignIn(false)
      const handleClose2 = () => setSignUp(false)
      const handleShow = () => {
        setSignIn(true);
      };
      const handleShow2 = () => {
        setSignUp(true);
        setSignIn(false);
      };
      return (
        <Button variant="primary" onClick={handleShow}>
            Sign In
          </Button>
    
          <Modal show={signIn} onHide={handleClose}>
            <Modal.Header closeButton>
              <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body><p>There is a form about login information on  that window</p>
            <Link as={Button} to="#" size="sm" onClick={handleShow2}>
              Register 
            </Link>
            <SignUpModal show={signUp} onClose2={handleClose2} />
            </Modal.Body>
            <Modal.Footer>
              <Button variant="secondary" onClick={handleClose}>
                Close
              </Button>
              <Button variant="primary" onClick={handleClose}>
                Save Changes
              </Button>
            </Modal.Footer>
          </Modal>
      );
    };
export default SignInModal;

SignUpModal.js

import { Fragment, useState } from "react";
import { Modal, Button} from "react-bootstrap";

const SignUpModal = (props) => {
  const {show, onClose2} = props;
  return (
    <Modal show={show} onHide={onClose2}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body><p>Form for signUp          </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={onClose2}>
            Close
          </Button>
          <Button variant="primary" onClick={onClose2}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
  );
};

export default SignUpModal;

When i put 2 modals inside of same modal.js file it works but i want to do it by component method. Please help me what is wrong with my code please...

CodePudding user response：

Your problem lies in the way you integrated your second modal. Once you clicked on the button to open the second modal, you are firing:

const handleShow2 = () => {
  setSignUp(true);
  setSignIn(false);
};

As we can see, this will close modal 1. Since it has the second modal embedded, the second modal will as well disappear.

In order to fix, you should render the second modal outside of your first modal, like:

return (
        <Button variant="primary" onClick={handleShow}>
            Sign In
          </Button>
          <SignUpModal show={signUp} onClose2={handleClose2} />
          <Modal show={signIn} onHide={handleClose}>
            <Modal.Header closeButton>
              <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body><p>There is a form about login information on  that window</p>
            <Link as={Button} to="#" size="sm" onClick={handleShow2}>
              Register 
            </Link>
            // SignUpModal got removed outside of the first modal.
            </Modal.Body>
            <Modal.Footer>
              <Button variant="secondary" onClick={handleClose}>
                Close
              </Button>
              <Button variant="primary" onClick={handleClose}>
                Save Changes
              </Button>
            </Modal.Footer>
          </Modal>
      );