I am trying to open one modal from another modal in React.js. but previous modal kept open

Question

It is a login page component in that I want to open forgot password component. Both components are modal. But when I clicked on Forgot password the login page modal is kept open. I just closed the login pop-up, when I click on it, forgot the password component

Below is the login pop-up component

    //Initial state for Modal
    const [show, setShow] = useState(false);
   //Close Modal
    const handleClose = () => {
        setShow(false)
    };
    //On this click Modal get visiblr
    const handleShow = () => setShow(true);
    
    
 <>

    <p onClick={handleShow}>LOGIN</p>
    //Login Modal
    <Modal show={show} onHide={handleClose} className="p-5 authpop">

        <Modal.Header closeButton onClick={handleClose}>
            <Modal.Title>
                Log In
            </Modal.Title>
        </Modal.Header>
        //Form submit
        <Form className=" p-3" onSubmit={handleSubmit}>
            <Form.Group className="mb-3 validateInput">
                <Form.Label>Enter email id</Form.Label>
                <Form.Control ref={emailRef} className="inputField" id="loginEmail" type="email" placeholder="Your email"
                    onChange={validateEmail}
                />
                <span className="errorMsg" >{emailError}</span>
            </Form.Group>
            <Form.Group className="mb-3 validateInput">
                <Form.Label>Enter Password</Form.Label>
                <Form.Control ref={passwRef} className="inputField" id="loginPass" type="password" placeholder="Password"
                    onChange={(e) => setPassword(e.target.value)}
                />
            </Form.Group>
            <Form.Group className="mb-3 d-flex justify-content-center">
                <Button className="SelectLogBtns LoginBtns" variant="primary" type="Submit">
                    Log In
                </Button>
            </Form.Group>
            <div className="errorMsg d-flex mb-3" >{error}</div>
            <Form.Group className="mb-3 loginlsRw">
                <div className="forgottLink eqSpace justify-content-start">     
                    //ForgottPassword Component link  
                    <ForgottPassw/>
                </div>                   
           
        </Form>
    </Modal>
    </>  

 //Here is forgot password component 
`const ForgottPassw = () => {
    const [Fogshow, setFogShow] = useState(false);    
    const [showBtn, setShowBtn] = useState(false);
    const handleFogClose = () => setFogShow(false);
    const handleFogShow = () => setFogShow(true);
    const { forgottPass } = useUserAuth();       
    return (
        <>            <p onClick={handleFogShow}>Forgott Password</p>
            <Modal show={Fogshow} onHide={handleFogClose} className="p-5 authpop">
                <Modal.Header closeButton onClick={handleFogClose}>
                </Modal.Header>
                <Form className="p-3" onSubmit={handleForgott}>
                    <Form.Group className="mb-3 validateInput">
                        <Form.Label>Enter email id</Form.Label>
                        <Form.Control ref={emailRef} className="inputField" id="loginEmail" type="email" placeholder="Your email"
                            onChange={validateFogEmail}
                        />
                        <span className="errorMsg" >{emailError}</span>
                    </Form.Group>

//Reset Link <Form.Group style={{ visibility: showBtn? 'visible': 'hidden' }} className="mb-3 d-flex justify-content-center"> Send Reset Link </Form.Group> </> ); }`

Answer 1

Well, the login modal isn't gonna go anywhere unless you make it that way. At the moment the login modal is rendered when the show state is true . Even if you click the forget-password link, it will stay open because you aren't reverting the state to false . Wherever is the logic to make the forget modal visible, include setShow(false) for login modal. Because I can't say what you are doing in your ForgetPassword file and your main component, I can't say much.