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 close login pop-up, when I click on, forgot 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>
</>