Lesson 39 — Forms in React | Handling Forms Step-by-Step

by

🧭 Introduction

Forms are everywhere in React applications — login, registration, contact forms, surveys, search boxes, and settings pages.

React does not provide a special form API. Instead, forms are built using:

  • Standard HTML form elements
  • React state and event handling

In this lesson, you will learn:

  • How forms work in React
  • Handling form submission
  • Managing multiple inputs
  • Creating reusable form logic
  • Common patterns and mistakes

❓ How Forms Work in React

In React:

  • Form elements like <input>, <select>, <textarea> are used
  • React controls form behavior using state
  • Form submission is handled using JavaScript

👉 React gives you full control over form data.

🧩 Basic Form Example

import { useState } from "react";

const SimpleForm = () => {
  const [name, setName] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault(); // prevent page refresh
    alert(`Name submitted: ${name}`);
  };

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

export default SimpleForm;

🧠 Why e.preventDefault() is Important?

By default, HTML forms:
❌ Reload the page on submit

Using:

e.preventDefault();

✔ Prevents reload
✔ Keeps React app intact

🧩 Handling Multiple Inputs in a Form

Instead of multiple useState hooks, use one state object.

📄 Multiple Input Form Example

import { useState } from "react";

const RegisterForm = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
  });

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

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

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        placeholder="Name"
        value={formData.name}
        onChange={handleChange}
      />

      <input
        name="email"
        placeholder="Email"
        value={formData.email}
        onChange={handleChange}
      />

      <input
        type="password"
        name="password"
        placeholder="Password"
        value={formData.password}
        onChange={handleChange}
      />

      <button type="submit">Register</button>
    </form>
  );
};

export default RegisterForm;

🧠 Key Pattern Used Here

[e.target.name]: e.target.value

✔ Dynamically updates the correct field
✔ Keeps code clean and scalable

🧩 Handling Checkbox Inputs

<input
  type="checkbox"
  checked={formData.terms}
  onChange={(e) =>
    setFormData({ ...formData, terms: e.target.checked })
  }
/>

👉 Checkbox uses checked, not value.

🧩 Handling Select Dropdown

<select
  value={formData.country}
  onChange={(e) =>
    setFormData({ ...formData, country: e.target.value })
  }
>
  <option value="">Select Country</option>
  <option value="india">India</option>
  <option value="usa">USA</option>
</select>

🧩 Resetting Form After Submit

setFormData({
  name: "",
  email: "",
  password: "",
});

✔ Clears form
✔ Improves UX

⚠ Common Form Mistakes

❌ Forgetting name attribute
❌ Forgetting preventDefault()
❌ Managing too many states
❌ Mixing controlled & uncontrolled inputs

🎯 Best Practices for Forms in React

✅ Use controlled inputs
✅ Use a single state object for large forms
✅ Keep input names meaningful
✅ Separate form logic if it grows
✅ Prepare for form libraries (next lessons)

❓ FAQs — Forms in React

🔹 Should I use one state or multiple states?

Use one state object for medium to large forms.

🔹 Can I submit forms without button?

Yes, pressing Enter submits the form.

🔹 Can I handle validation here?

Yes, but it becomes complex. Dedicated validation lesson is next.

🔹 Is this approach used in real apps?

Yes, for simple forms. Larger apps use form libraries.

🧠 Quick Recap

✔ Forms use standard HTML elements
✔ onSubmit controls submission
✔ Controlled inputs are recommended
✔ Single state object scales better

🎉 Conclusion

Forms in React are powerful and flexible when handled correctly. Understanding these patterns helps you build clean, predictable, and scalable form logic.

This lesson prepares you perfectly for:
👉 React Hook Form and advanced validation 🚀

👉 Next Lesson (SECTION 8):
Lesson 40 — React Hook Form

Leave a Comment