https://github.com/najibhossain49/react-handling-forms
React-handling-forms in Multiple Approaches
https://github.com/najibhossain49/react-handling-forms
Last synced: about 2 months ago
JSON representation
React-handling-forms in Multiple Approaches
- Host: GitHub
- URL: https://github.com/najibhossain49/react-handling-forms
- Owner: NajibHossain49
- Created: 2024-12-02T09:01:25.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-12-02T13:30:12.000Z (6 months ago)
- Last Synced: 2025-02-15T19:48:47.633Z (3 months ago)
- Language: JavaScript
- Size: 60.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Form Handling
### **Controlled Approaches**
#### **Basic Approaches**
1. **Individual State for Each Input Field**
- Manage each field using a separate piece of state (`useState`).
2. **Single State Object (`formData`)**
- Use one state object to store all form field values.
3. **Reducer Function with `useReducer`**
- Use a reducer function to manage form state, especially for complex forms.
### **Uncontrolled Approaches**
#### **Handling with event.target**
#### Uncontrolled Form Handling with event.target [✔]
```React
// eslint-disable-next-line no-unused-vars
import React, { useState } from "react";
const UncontrolledFormWithTarget = () => {
// State to hold validation errors
const [errors, setErrors] = useState("");
const handleSubmit = (event) => {
event.preventDefault(); // Prevents the default form submission behavior
// Get the form object
const form = event.target;
// Fetching values directly from the form object
const firstName = form.firstName.value.trim();
const lastName = form.lastName.value.trim();
const email = form.email.value.trim();
const age = form.age.value.trim();
const phone = form.phone.value.trim();
const gender = form.gender.value;
const address = form.address.value.trim();
const dob = form.dob.value;
// Initialize an error object
let formErrors = {};
// Validation logic
if (firstName.length < 3) {
formErrors.firstName = "First Name must be at least 3 characters";
}
if (lastName.length < 3) {
formErrors.lastName = "Last Name must be at least 3 characters";
}
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
formErrors.email = "Please enter a valid email";
}
if (isNaN(age) || age <= 0) {
formErrors.age = "Age must be a positive number";
}
const phonePattern = /^[0-9]{10}$/; // Simple phone number validation
if (!phonePattern.test(phone)) {
formErrors.phone = "Please enter a valid phone number (10 digits)";
}
if (!gender) {
formErrors.gender = "Please select a gender";
}
if (address.length < 5) {
formErrors.address = "Address must be at least 5 characters";
}
if (!dob) {
formErrors.dob = "Please select a date of birth";
}
// If there are any errors, update the state
setErrors(formErrors);
// If no errors, submit the form (for demo purposes, we'll just log the data)
if (Object.values(formErrors).every((error) => error === "")) {
alert("Form submitted successfully!");
console.log("First Name:", firstName);
console.log("Last Name:", lastName);
console.log("Email:", email);
console.log("Age:", age);
console.log("Phone:", phone);
console.log("Gender:", gender);
console.log("Address:", address);
console.log("Date of Birth:", dob);
form.reset();
}
};
return (
Registration Form: Uncontrolled Form Handling with event.target
First Name
{errors.firstName && (
{errors.firstName}
)}
Last Name
{errors.lastName && (
{errors.lastName}
)}
Email
{errors.email && (
{errors.email}
)}
Age
{errors.age && (
{errors.age}
)}
Phone Number
{errors.phone && (
{errors.phone}
)}
Gender
Select Gender
Male
Female
Other
{errors.gender && (
{errors.gender}
)}
Address
{errors.address && (
{errors.address}
)}
Date of Birth
{errors.dob && (
{errors.dob}
)}
Submit
);
};
export default UncontrolledFormWithTarget;
```
#### Controlled Form Handling with Single State Object (formData) [✔]
##### **Single State Object (`formData`)**
- **Best For**: Most forms where you can easily manage all form field values in a single state object.
- **Why It's Popular**: Simple and effective for small to medium forms. It helps avoid managing multiple `useState` calls.
```
const [formData, setFormData] = useState({ name: "", email: "" });
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({ ...prev, [name]: value }));
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
};
return (
Submit
);
```