React Forms

Forms are an essential part of web development. They let users input data — like filling out a contact form, signing up, or submitting feedback. In React, forms work a little differently than traditional HTML because React uses a component-based approach and manages form data through state.

Controlled vs Uncontrolled Components

React forms can be controlled or uncontrolled:

Controlled Components

In controlled components, form data is handled by the React component’s state.

import React, { useState } from "react";

function ContactForm() {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Hello, ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

• value={name} binds the input to React state.
• onChange updates the state as you type.

This is called a controlled component because React controls the form input.

Uncontrolled Components

Uncontrolled components rely on the DOM to manage input values using refs (reference objects).

import React, { useRef } from "react";

function ContactForm() {
  const inputRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Hello, ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>
  );
}

• Easier for simple forms.
• Harder to manage and validate as forms grow.

Handling Multiple Inputs

You can manage multiple fields with one state object.

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

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }));
  };

  return (
    <form>
      <input name="username" onChange={handleChange} value={formData.username} />
      <input name="email" onChange={handleChange} value={formData.email} />
    </form>
  );
}

Checkbox, Radio, Select Inputs

React treats all form elements the same way, including checkboxes and dropdowns.

Checkbox Example:

const [agree, setAgree] = useState(false);

<input
  type="checkbox"
  checked={agree}
  onChange={(e) => setAgree(e.target.checked)}
/>

Select Dropdown:

const [color, setColor] = useState("red");

<select value={color} onChange={(e) => setColor(e.target.value)}>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
</select>

Form Validation

You can validate inputs using basic logic inside the handleSubmit function.

const handleSubmit = (e) => {
  e.preventDefault();
  if (!email.includes("@")) {
    alert("Please enter a valid email");
    return;
  }
  // proceed to submit
};

For advanced validation, you can use libraries like:

• Formik
• React Hook Form
• Yup (for schema validation)

Summary

Why Use Forms in React?

• Easier to manage dynamic data
• Helps with validation and conditional rendering
• Integrates with APIs or backend easily
• Clean and reusable UI components

Final Thought

React forms are powerful because they give developers full control over form inputs and behavior. While they require more code than basic HTML, the flexibility, validation, and data handling make them ideal for building modern web apps.