LoginModal.js

import React, { useState } from 'react';
import { Button, Modal} from 'react-bootstrap';
import SignupModal from './SignupModal.js';

export default function LoginModal(props) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [buttonText, setbuttonText] = useState('Submit');
  const [forgotPass, setForgotPass] = useState(false);

  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const handleForgot = () => setForgotPass(v => !v);
  return (
    <>
      <Button type="button" className="btn btn-default" onClick={handleShow}>
        <i className="fa fa-user" aria-hidden="true"></i>Login/Signup
        </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Login</Modal.Title>
        </Modal.Header>
        <Modal.Body style={{ textAlign: 'center' }}>
        { !forgotPass ? (
          <div>
            <form>
            <input type="email" placeholder="Enter Email"/>
            <br/>
            <input type="password" placeholder="Enter Password"/>
            <br/>
            <Button variant="primary" onClick={handleClose}>
              Login
            </Button>
          </form>
          <div className="forgotpass">
            <p onClick={handleForgot}><a href="#">Forgot Password?</a></p>
             <SignupModal/>
          </div>
          </div>
          ) : <div>
             <form>
            <input type="email" placeholder="Enter Email"/>
            <br/>
            <Button variant="primary" onClick={handleClose}>
              Submit
            </Button>
            </form>
            <p onClick={handleForgot}><a href="#">{`< back to login`}</a></p>
          </div>}
        </Modal.Body>
      </Modal>
    </>
  );
}