How to create a form in react

How to create a form in react

Posted by Margie Crona on May 27, 2022

How to create a form in react

How to create a form in react

Posted by Margie Crona on May 27, 2022

Create form to submit data in React

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!