SignupModal.js

import React, { useState } from 'react';
import { Button, Modal} from 'react-bootstrap';

export default function SignupModal(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 (
    <>
      <p>Don't have an account? <a href="#" onClick={handleShow}>Signup here</a></p>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Signup</Modal.Title>
        </Modal.Header>
        <Modal.Body style={{ textAlign: 'left' }}>
          <div>
            <form>
            <label>First Name</label>
            <br/>
            <input type="text" placeholder="Enter First Name"/>
            <br/>
            <label>Last Name</label>
            <br/>
            <input type="text" placeholder="Enter Last Name"/>
            <br/>
            <label>Phone Number</label>
            <br/>
            <input type="telephone" placeholder="Enter Phone Number"/>
            <br/>
            <label>Email</label>
            <br/>
            <input type="email" placeholder="Enter Email"/>
            <br/>
            <label>Password</label>
            <br/>
            <input type="password" placeholder="Enter Password"/>
            <br/>
            <label>Confirm Password</label>
            <br/>
            <input type="password" placeholder="Enter Confirm Password"/>
            <br/>
            <br/>
            <Button variant="primary" onClick={handleClose}>
              Signup
            </Button>
          </form>
          </div>
        </Modal.Body>
      </Modal>
    </>
  );
}