React uses forms to allow user to submit data. In this lesson, you will be shown how to create a form that will allow users to enter thier details.

1. Install packages

Before you start, download these packages in order to help you build the form:

npm install mdbreact react-bootstrap bootstrap

Step 2 Create form that will allow users to enter details:

function App() {

  return (
      <div className="container">
          <div className="mx-auto col-6 mt-5">
              <Form>
                <div className="txt-fld-pd">
                    <label className="form-label">First name</label>
                    <MDBInput type="text" name="firstName" required/>
                </div>
                <div className="txt-fld-pd">
                    <label className="form-label">Surname</label>
                    <MDBInput type="text" name="lastName" required/>
                </div>
                <div className="txt-fld-pd">
                    <label className="form-label">Email</label>
                    <MDBInput type="email" name="emailAddress" required/>
                </div>
              </Form>
          </div>
      </div>
  );
}

export default App;

Step 3. Add useSate to store the input:

function App() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");

  return (
      <div className="container">
          <div className="mx-auto col-6 mt-5">
              <Form>
                <div className="txt-fld-pd">
                    <label className="form-label">First name</label>
                    <MDBInput type="text" name="firstName" onChange={(e) => setFirstName(e.target.value)} required/>
                </div>
                <div className="txt-fld-pd">
                    <label className="form-label">Surname</label>
                    <MDBInput type="text" name="lastName" onChange={(e) => setLastName(e.target.value)} required/>
                </div>
                <div className="txt-fld-pd">
                    <label className="form-label">Email</label>
                    <MDBInput type="email" name="emailAddress" onChange={(e) => setEmail(e.target.value)} required/>
                </div>
              </Form>
          </div>
      </div>
  );
}

export default App;

Step 4. Handle submit by adding button, onChange handler and form attribute onSubmit:

function App() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (event) => {
      event.preventDefault();
      alert(`first name: ${firstName}` +" "+ `last name: ${lastName}` +" "+ `email: ${email}`)
  }

  return (
      <div className="container">
          <div className="mx-auto col-6 mt-5">
              <Form onSubmit={handleSubmit}>
                <div className="txt-fld-pd">
                    <label className="form-label">First name</label>
                    <MDBInput type="text" name="firstName" onChange={(e) => setFirstName(e.target.value)} required/>
                </div>
                <div className="txt-fld-pd">
                    <label className="form-label">Surname</label>
                    <MDBInput type="text" name="lastName" onChange={(e) => setLastName(e.target.value)} required/>
                </div>
                <div className="txt-fld-pd">
                    <label className="form-label">Email</label>
                    <MDBInput type="email" name="emailAddress" onChange={(e) => setEmail(e.target.value)} required/>
                </div>
                <div>
                  <button type="submit">Submit</button>
                </div>
              </Form>
          </div>
      </div>
  );
}

export default App;

That's It!