Day 15 – Handling Forms in React
3 mins read

Day 15 – Handling Forms in React

Anand Gora0Tagged , , , ,

Learn handling forms in React with controlled vs uncontrolled components, real-time validation, and examples for beginners.

Forms are one of the most common parts of any web app — login pages, signups, feedback forms, checkout forms, etc.

In React, form handling is slightly different from vanilla HTML because React controls the state of inputs. This gives us more power but also requires a proper approach.

In today’s blog, we’ll cover:

  • Controlled vs Uncontrolled Components
  • How to handle form inputs in React
  • Simple form validation examples

Controlled vs Uncontrolled Components

Controlled Components

  • In a controlled component, the form input’s value is managed by React state.
  • Every change updates state using onChange.

Example:

function ControlledForm() {
  const [name, setName] = React.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>
  );
}

✅ Here, name is always synced with React state.

Uncontrolled Components

  • In an uncontrolled component, the form input is handled directly by the DOM using ref.

Example:

function UncontrolledForm() {
  const inputRef = React.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>
  );
}

✅ This is simpler but gives less control. Controlled components are recommended for most cases.

Handling Multiple Inputs

function SignupForm() {
  const [form, setForm] = React.useState({
    name: "",
    email: "",
    password: "",
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(form);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        value={form.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        name="email"
        value={form.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <input
        type="password"
        name="password"
        value={form.password}
        onChange={handleChange}
        placeholder="Password"
      />
      <button type="submit">Signup</button>
    </form>
  );
}

✅ This is scalable for large forms.

Adding Form Validation

Example: Simple Validation

function LoginForm() {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) {
      setError("Invalid email address");
    } else if (password.length < 6) {
      setError("Password must be at least 6 characters");
    } else {
      setError("");
      alert("Login successful!");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Login</button>
      {error && <p style={{ color: "red" }}>{error}</p>}
    </form>
  );
}

✅ Now we validate:

  • Email must contain @.
  • Password must be at least 6 characters.

Why This Matters

  • Controlled forms give real-time validation.
  • React forms can integrate with libraries like Formik or React Hook Form for advanced features.
  • Clean and reliable form handling improves user experience.

Internal Links

External Links

Conclusion

Handling forms in React is all about choosing between controlled and uncontrolled components. For most real-world apps, controlled components with validation are the best choice.

👉 Next Blog (Day 16): Fetching Data in React (API Calls with fetch & axios)

Leave a Reply

Your email address will not be published. Required fields are marked *

I’m Anand Gora, a passionate Full Stack Developer and coding blogger. With a B.Tech in Computer Science and hands-on experience in building scalable web applications using the MERN stack (MongoDB, Express.js, React.js, Node.js), I love turning ideas into functional, user-friendly digital products. Over the years, I’ve worked as a MERN Stack Developer and an Editorial Coordinator, which gave me expertise not only in coding but also in content creation, SEO, and digital marketing. This blend of technical and creative experience drives me to share practical coding tutorials, web development insights, and problem-solving tips with the developer community. When I’m not coding or writing, I enjoy experimenting with new frameworks, optimizing applications for performance, and contributing to projects that push the limits of innovation.
Website https://codingjive.com

Related Posts