React Forms: Controlled vs Uncontrolled Components

import { useState } from 'react';

function ControlledInput() {
  // State holds the input value
  const [name, setName] = useState('');

  const handleChange = (event) => {
    // Update state on every keystroke
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // State already has the current value
    console.log('Submitted name:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}              {/* Bound to state */}
          onChange={handleChange}  {/* Updates state */}
        />
      </label>
      <button type="submit">Submit</button>
      <p>Current value: {name}</p>
    </form>
  );
}

import { useState } from 'react';

function RegistrationForm() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    agreeToTerms: false
  });

  // Single handler for all inputs
  const handleChange = (event) => {
    const { name, value, type, checked } = event.target;
    
    setFormData(prev => ({
      ...prev,
      // Use checked for checkboxes, value for others
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form data:', formData);
    // API call, validation, etc.
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="firstName"
        value={formData.firstName}
        onChange={handleChange}
        placeholder="First Name"
      />
      
      <input
        type="text"
        name="lastName"
        value={formData.lastName}
        onChange={handleChange}
        placeholder="Last Name"
      />
      
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      
      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
        placeholder="Password"
      />
      
      <label>
        <input
          type="checkbox"
          name="agreeToTerms"
          checked={formData.agreeToTerms}
          onChange={handleChange}
        />
        I agree to the terms
      </label>
      
      <button type="submit">Register</button>
    </form>
  );
}

import { useState } from 'react';

function ValidatedForm() {
  const [email, setEmail] = useState('');
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});

  // Validation logic
  const validateEmail = (value) => {
    if (!value) {
      return 'Email is required';
    }
    if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value)) {
      return 'Invalid email address';
    }
    return null;
  };

  const handleChange = (e) => {
    const value = e.target.value;
    setEmail(value);
    
    // Real-time validation
    if (touched.email) {
      const error = validateEmail(value);
      setErrors(prev => ({ ...prev, email: error }));
    }
  };

  const handleBlur = () => {
    setTouched(prev => ({ ...prev, email: true }));
    const error = validateEmail(email);
    setErrors(prev => ({ ...prev, email: error }));
  };

  const isValid = !errors.email && email.length > 0;

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={handleChange}
        onBlur={handleBlur}
        style={{ borderColor: errors.email ? 'red' : 'green' }}
      />
      {errors.email && <span style={{ color: 'red' }}>{errors.email}</span>}
      <button disabled={!isValid}>Submit</button>
    </div>
  );
}

import { useRef } from 'react';

function UncontrolledInput() {
  // Create a ref to access the DOM element
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    // Access the value directly from the DOM
    console.log('Submitted name:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          ref={inputRef}           {/* Attach ref to element */}
          defaultValue="John"      {/* Initial value (not controlled) */}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

import { useRef, useState } from 'react';

function FileUpload() {
  const fileInputRef = useRef(null);
  const [selectedFile, setSelectedFile] = useState(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    
    const file = fileInputRef.current.files[0];
    if (file) {
      console.log('Selected file:', file.name);
      console.log('Size:', file.size, 'bytes');
      console.log('Type:', file.type);
      
      // Upload logic here...
      const formData = new FormData();
      formData.append('file', file);
      // fetch('/api/upload', { method: 'POST', body: formData });
    }
  };

  const handleFileChange = () => {
    const file = fileInputRef.current.files[0];
    setSelectedFile(file ? file.name : null);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="file"
        ref={fileInputRef}
        onChange={handleFileChange}
        accept="image/*,.pdf"
      />
      {selectedFile && <p>Selected: {selectedFile}</p>}
      <button type="submit">Upload</button>
    </form>
  );
}