React Fundamentals

Chapter 10: Forms in React

10.1 Controlled Components

Controlled components have their value controlled by React state. This is the recommended approach for forms.

function Form() {
    const [value, setValue] = useState(');
    
    const handleChange = (e) => {
        setValue(e.target.value);
    };
    
    return (
        <input 
            value={value} 
            onChange={handleChange} 
        />
    );
}

Controlled vs Uncontrolled:

• Controlled: React controls value via state
• Uncontrolled: DOM manages value (use refs)
• Controlled is preferred for most cases

Multiple Inputs:

function Form() {
    const [formData, setFormData] = useState({
        name: ',
        email: ',
        message: '
    });
    
    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
    };
    
    return (
        <form>
            <input 
                name="name"
                value={formData.name}
                onChange={handleChange}
            />
            <input 
                name="email"
                value={formData.email}
                onChange={handleChange}
            />
            <textarea 
                name="message"
                value={formData.message}
                onChange={handleChange}
            />
        </form>
    );
}

10.2 Form Submission

Handle form submission in React.

function ContactForm() {
    const [formData, setFormData] = useState({ name: ', email: ' });
    
    const handleSubmit = (e) => {
        e.preventDefault();
        // Process form data
        console.log('Submitted:', formData);
        // Reset form
        setFormData({ name: ', email: ' });
    };
    
    return (
        <form onSubmit={handleSubmit}>
            <input 
                name="name"
                value={formData.name}
                onChange={handleChange}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

10.3 Form Validation

Validate form input before submission.

function Form() {
    const [email, setEmail] = useState(');
    const [error, setError] = useState(');
    
    const validateEmail = (email) => {
        return /^[^s@]+@[^s@]+.[^s@]+$/.test(email);
    };
    
    const handleChange = (e) => {
        const value = e.target.value;
        setEmail(value);
        
        if (value && !validateEmail(value)) {
            setError('Invalid email format');
        } else {
            setError(');
        }
    };
    
    return (
        <form>
            <input 
                type="email"
                value={email}
                onChange={handleChange}
            />
            {error && <span className="error">{error}</span>}
        </form>
    );
}

10.4 Form Best Practices

Follow best practices for form handling.

• Use controlled components
• Validate input on change or blur
• Provide clear error messages
• Disable submit button when invalid
• Show loading state during submission
• Reset form after successful submission