React Simple Form Component using Props and useStat

📌 INTRODUCTION

Forms are an essential part of web applications. In React, form handling is done using state and event handling.

In this program, we will:

• Create a simple form component
• Handle user input using useState
• Use props for submission handling

👉 This concept is widely used in:

• Login forms
• Registration forms
• Contact forms

---

📘 PROBLEM STATEMENT

👉 Develop a React component to create a simple form, accepting props like onSubmit and fields.

---

💡 CONCEPTS USED

• useState Hook
• Form Handling
• Props
• Event Handling

---

🧠 LOGIC EXPLANATION

1. Create state for form inputs
2. Update state on user input
3. Handle form submission
4. Pass data using props

---

💻 PROGRAM CODE

---

Step 1: Create Form Component

import { useState } from "react";

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

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

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

  return (
    <form onSubmit={handleSubmit} style={styles.form}>
      <h2>Simple Form</h2>

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

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

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

const styles = {
  form: {
    display: "flex",
    flexDirection: "column",
    width: "250px",
    gap: "10px"
  }
};

export default SimpleForm;

---

Step 2: Use in App.js

import SimpleForm from "./SimpleForm";

function App() {
  const handleFormSubmit = (data) => {
    alert(`Name: ${data.name}, Email: ${data.email}`);
  };

  return (
    <div>
      <SimpleForm onSubmit={handleFormSubmit} />
    </div>
  );
}

export default App;

---

🖥️ OUTPUT

👉 User enters data:

Name: Kavita
Email: kavita@gmail.com

👉 After submit:

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

---

🔍 STEP-BY-STEP EXPLANATION

• useState() → stores form data
• handleChange() → updates input values
• [e.target.name] → dynamic key update
• handleSubmit() → prevents reload and sends data
• onSubmit prop → passes data to parent

---

⚡ ADVANCED FEATURES

1. Add More Fields

password, phone, address

---

2. Form Validation

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

---

3. Reset Form

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

---

🎯 WHY THIS PROGRAM IS IMPORTANT

• Core concept in React
• Used in every application
• Important for interviews
• Helps build full-stack apps

---

🌟 REAL-WORLD USE CASE

• Login systems
• Registration forms
• Contact forms
• Feedback systems

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is form handling in React?

👉 Managing form inputs using state.

---

Q2. Why use useState in forms?

👉 To store and update input values.

---

Q3. What is event.preventDefault()?

👉 Prevents page reload on form submit.

---

Q4. What are controlled components?

👉 Inputs controlled by React state.

---

Q5. What is props in form handling?

👉 Used to pass data/functions between components.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Todo Component – Program 12
👉 React Props – Program 10
👉 React Counter App – Program 6

---

📌 CONCLUSION

Form handling is one of the most important skills in React. It allows you to capture and process user input efficiently.

👉 Master this to build real-world applications like login and registration systems.

---

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