Controlled vs Uncontrolled

import React, { useState, useRef } from 'react';

export default function FormExample() {
  // For the Controlled Input
  const [name, setName] = useState('');
  
  // For the Uncontrolled Input
  const ageRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Controlled: We already know the value because it's in State!
    console.log("Controlled Name:", name);
    // Uncontrolled: We have to manually ask the DOM for the value.
    console.log("Uncontrolled Age:", ageRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
      <div>
        <h3>Controlled Input</h3>
        {/* React is the boss here. The value is locked to State. */}
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Enter name (React tracks every keystroke!)"
          className="w-full p-2 border"
        />
        <p className="text-sm text-gray-500">Current state: {name}</p>
      </div>

      <div>
        <h3>Uncontrolled Input</h3>
        {/* The DOM is the boss here. We only use defaultValue to start it. */}
        <input 
          type="number" 
          ref={ageRef}
          defaultValue="18"
          placeholder="Enter age (React ignores keystrokes)"
          className="w-full p-2 border"
        />
      </div>

      <button type="submit" className="bg-blue-500 text-white p-2 rounded">
        Submit Form
      </button>
    </form>
  );
}