Post 16: React Form Handling using useState (Controlled Components)

📌 INTRODUCTION

Handling forms in React is different from traditional HTML. In React, we use controlled components, where form inputs are controlled by state.

In this program, we will:

• Use useState to manage form inputs
• Handle user input dynamically
• Understand controlled components

👉 This concept is essential for:

• Login forms
• Registration systems
• Real-world applications

---

📘 PROBLEM STATEMENT

👉 Create a program to manage a simple form with input fields and a submit button using state in React.

---

💡 CONCEPTS USED

• useState Hook
• Controlled Components
• Event Handling
• Form Submission

---

🧠 LOGIC EXPLANATION

1. Create state for form inputs
2. Bind input value to state
3. Update state on change
4. Handle submit event

---

💻 PROGRAM CODE

Open src/App.js:

import { useState } from "react";

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
    alert(`Name: ${formData.name}, Email: ${formData.email}`);
  };

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Controlled Form</h1>

      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="name"
          placeholder="Enter Name"
          value={formData.name}
          onChange={handleChange}
        />

        <br /><br />

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

        <br /><br />

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

export default App;

---

🖥️ OUTPUT

👉 User enters:

Name: Kavita
Email: kavita@gmail.com

👉 After submit:

Alert: Name: Kavita, Email: kavita@gmail.com

---

🔍 STEP-BY-STEP EXPLANATION

• useState() → stores form data
• value={formData.name} → controlled input
• onChange → updates state
• handleSubmit() → processes form

---

🎯 KEY CONCEPT: CONTROLLED COMPONENT

👉 In React:

• Input value is controlled by state
• State is the single source of truth

---

⚡ ADVANCED FEATURES

1. Add Password Field

<input type="password" name="password" />

---

2. Add Validation

if (!formData.name) {
  alert("Name is required");
}

---

3. Reset Form

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

---

4. Handle Multiple Fields

👉 Same logic works for any number of inputs

---

🌟 ADVANTAGES

• Full control over inputs
• Easy validation
• Better user experience
• Required for real-world apps

---

📚 REAL-WORLD USE CASE

• Login forms
• Registration forms
• Payment forms
• Feedback systems

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is a controlled component?

👉 A component whose input values are controlled by React state.

---

Q2. Why use useState in forms?

👉 To manage and update input values.

---

Q3. What is the role of onChange?

👉 Updates state when user types.

---

Q4. What is event.preventDefault()?

👉 Prevents page reload on form submission.

---

Q5. What is uncontrolled component?

👉 Inputs not controlled by state.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Simple Form – Program 14
👉 React Fetch API – Program 15
👉 React Props – Program 10

---

📌 CONCLUSION

Form handling using useState is a fundamental concept in React. Controlled components give you complete control over user input.

👉 Master this to build professional and real-world applications.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites