React Forms and User Input

# React Forms and User Input

1. Introduction #

2. Learning Objectives #

• Understand what a "Controlled Component" is.

• Bind HTML inputs to React state.

• Handle form submissions effectively.

• Manage multiple inputs in a single form.

3. Beginner-Friendly Explanations #

Uncontrolled vs. Controlled Components #

• Uncontrolled (Standard HTML): You type into an <input>. The browser remembers what you typed. When you hit submit, the browser packages the data and sends it.

• Controlled (React Pattern): React says, *"I want to be in charge."* You create a state variable [text, setText] = useState(""). You force the <input> to always display the value of text. When the user types, the onChange event updates text via setText(). React is the "single source of truth".

4. Syntax Explanation #

Step 1: The Single Input #

```jsx id="ch11_ex1" // Example React component import { useState } from 'react';

function SingleInput() { const [name, setName] = useState("");

return ( <div> {/* 1. Value is tied to state. 2. onChange updates state. */} <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter your name" /> <p>Hello, {name}!</p> </div> ); }

### Step 2: Form Submission
As we learned in Chapter 8, we must prevent the default form submission so the browser doesn't reload.

jsx id="ch11_ex2" // Example React component function LoginForm() { const [email, setEmail] = useState("");

const handleSubmit = (e) => { e.preventDefault(); // Stop page reload alert(Submitting login for ${email}); // Here you would normally send the data to an API };

return ( <form onSubmit={handleSubmit}> <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} /> <button type="submit">Log In</button> </form> ); }

## 5. Output Explanations
When the user types the letter 'A' into the email input:
1. `onChange` fires. `e.target.value` is "A".
2. `setEmail("A")` is called.
3. The component re-renders. The input `value` is now "A".
This cycle repeats for every single keystroke, keeping the state and the input perfectly in sync.

## 6. Real-World Examples
- **Live Search:** As you type in a search box, the `onChange` event updates the state, which immediately filters a list of products displayed on the screen.
- **Form Validation:** Because React knows the value on every keystroke, it can instantly show a red error message if an email doesn't contain an `@` symbol.

## 7. Managing Multiple Inputs
If you have a form with 10 inputs, creating 10 different `useState` variables is tedious. Instead, you can use a single state object to manage the entire form!

jsx id="ch11_ex3" // Example React component import { useState } from 'react';

function ComplexForm() { const [formData, setFormData] = useState({ firstName: "", lastName: "" });

const handleChange = (e) => { // We use the 'name' attribute of the input to update the correct field setFormData({ ...formData, // Keep existing data [e.target.name]: e.target.value // Update the specific field }); };

return ( <form> <input name="firstName" value={formData.firstName} onChange={handleChange} /> <input name="lastName" value={formData.lastName} onChange={handleChange} /> </form> ); }

## 8. Common Mistakes
- **Forgetting the `onChange` handler:** If you set `value={name}` but forget `onChange`, the input becomes completely read-only! You won't be able to type in it. React will also show a warning in the console.
- **Forgetting `e.preventDefault()`:** The page will reload on submit, clearing all your state.

## 9. Best Practices
- Always use Controlled Components unless you have a specific performance reason not to (which is rare).
- For massive, complex forms with dozens of fields and validation rules, consider using specialized libraries like `React Hook Form` or `Formik`.

## 10. Exercises
1. Create a `ContactForm` component with a `textarea` for a message.
2. Tie the `textarea` to a state variable and display the number of characters the user has typed below it.

## 11. Mini Project: Signup Form
Let's build a clean, validated signup form.

jsx id="ch11_proj1" // Example React component import React, { useState } from 'react';

export default function SignupForm() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [submitted, setSubmitted] = useState(false);

const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); };

if (submitted) { return ( <div className="max-w-md mx-auto mt-10 p-6 bg-green-50 text-green-700 rounded-lg text-center font-bold"> Welcome aboard! Your account for {email} has been created. </div> ); }

return ( <div className="max-w-md mx-auto mt-10 p-8 bg-white rounded-xl shadow-lg border border-gray-100"> <h2 className="text-2xl font-bold mb-6 text-gray-800 text-center">Create Account</h2> <form onSubmit={onSubmit} className="space-y-4"> <div> <label className="block text-sm font-medium text-gray-700 mb-1">Email</label> <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" placeholder="you@example.com" /> </div> <div> <label className="block text-sm font-medium text-gray-700 mb-1">Password</label> <input type="password" required value={password} onChange={(e) => setPassword(e.target.value)} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" placeholder="••••••••" /> {/* Live validation feedback */} {password.length > 0 && password.length < 6 && ( <p className="text-red-500 text-xs mt-1">Password must be at least 6 characters</p> )} </div>

<button type="submit" disabled={password.length < 6} className="w-full bg-blue-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-700 disabled:bg-gray-400 transition" > Sign Up </button> </form> </div> ); } ``

Q2: What happens if you set value={myState} on an input but do NOT provide an onChange handler? A) The input works normally. B) React crashes immediately. C) The input becomes read-only and ignores user typing. D) The input clears itself on every keypress. *Answer: C*

• Q: How do you handle forms with many inputs without writing dozens of useState hooks?