Profile Photo

React forms

Created on: Sep 17, 2024

In React Forms, all the form data is stored in the React’s component state, so it can handle the form submission and retrieve data that the user entered.

React forms can be implemented using either controlled or uncontrolled components:

In controlled components, the form data is handled by the React component state. Every form element’s value is controlled by React, making the data flow predictable and easy to manage. While in uncontrolled components, form data is handled by the DOM itself.

import React, { useState } from "react";

function SimpleForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
  });

  const [submittedData, setSubmittedData] = useState(null);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmittedData(formData);
    setFormData({ name: "", email: "" });
  };

  return (
    <div>
      <h2>React Form Example</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
          />
        </div>

        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            required
          />
        </div>

        <button type="submit">Submit</button>
      </form>

      {submittedData && (
        <div>
          <h3>Submitted Data</h3>
          <p>Name: {submittedData.name}</p>
          <p>Email: {submittedData.email}</p>
        </div>
      )}
    </div>
  );
}

export default SimpleForm;

Benefits

  1. Using react form gives full control over form data, making it easier to manage, validate, and manipulate user input.
  2. React maintains the form data in the component’s state, ensuring that there’s a single source of truth for the form data
  3. React allows for real-time form validation by leveraging state changes
  4. Forms can be used to build reusable form components

Reference