📝 Forms in React

Controlled vs Uncontrolled

An HTML input keeps its own value inside the DOM — you type, the browser remembers. React offers two ways to work with that:

• A controlled component hands the value to React state. React holds the truth; the input just displays it. This is the default you'll reach for.
• An uncontrolled component lets the DOM keep the value, and you read it with a ref only when you need it — handy for simple or file inputs.

The Controlled Input Loop

A controlled input is a two-way binding built from two props: value (state flows into the input) and onChange (keystrokes flow back into state). This closed loop is the heart of every React form.

import { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  // Every keystroke pushes the new text back into state.
  const handleChange = (e) => setValue(e.target.value);

  return (
    <div>
      <input
        type="text"
        value={value}          {/* state flows IN */}
        onChange={handleChange} {/* changes flow OUT */}
        placeholder="Type something…"
      />
      <p>You typed: {value}</p>
    </div>
  );
}

Many Inputs, One Handler

A real form has several fields. You don't need a separate handler for each — store the fields in one state object and let a single handler use the input's name to update the right key. The computed-property syntax [name]: value makes it clean.

function RegistrationForm() {
  const [form, setForm] = useState({
    username: '',
    email: '',
    password: '',
  });

  // One handler for the whole form, keyed by each input's name.
  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitting:', form);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="username">Username</label>
      <input id="username" name="username"
             value={form.username} onChange={handleChange} />

      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email"
             value={form.email} onChange={handleChange} />

      <label htmlFor="password">Password</label>
      <input id="password" name="password" type="password"
             value={form.password} onChange={handleChange} />

      <button type="submit">Register</button>
    </form>
  );
}

Every Input Type

The controlled pattern adapts to each kind of input. The only thing that changes is which property you bind and read.

Textarea & select

function CommentAndPick() {
  const [comment, setComment] = useState('');
  const [fruit, setFruit] = useState('');

  return (
    <>
      <textarea
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        rows={4}
      />
      <p>{comment.length} characters</p>

      <select value={fruit} onChange={(e) => setFruit(e.target.value)}>
        <option value="">Choose…</option>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
      </select>
    </>
  );
}

Note that in React a <textarea> uses value (not children), and a <select> uses value on the select element itself rather than a selected attribute on an option — more consistent than plain HTML.

Checkboxes — bind checked, not value

function Preferences() {
  const [prefs, setPrefs] = useState({ newsletter: false, notifications: false });

  const handleCheck = (e) => {
    const { name, checked } = e.target;   // read checked for checkboxes
    setPrefs((prev) => ({ ...prev, [name]: checked }));
  };

  return (
    <>
      <label>
        <input type="checkbox" name="newsletter"
               checked={prefs.newsletter} onChange={handleCheck} /> Newsletter
      </label>
      <label>
        <input type="checkbox" name="notifications"
               checked={prefs.notifications} onChange={handleCheck} /> Notifications
      </label>
    </>
  );
}

Radio buttons — share a name, compare the value

function PlanChooser() {
  const [plan, setPlan] = useState('free');

  return ['free', 'pro', 'team'].map((option) => (
    <label key={option}>
      <input
        type="radio"
        value={option}
        checked={plan === option}   {/* the selected one matches state */}
        onChange={(e) => setPlan(e.target.value)}
      /> {option}
    </label>
  ));
}

File input — read e.target.files

function Uploader() {
  const [file, setFile] = useState(null);

  const handleFile = (e) => {
    const chosen = e.target.files[0];   // FileList → first file
    setFile(chosen);
  };

  return (
    <>
      <input type="file" accept="image/*" onChange={handleFile} />
      {file && <p>{file.name} — {(file.size / 1024).toFixed(1)} KB</p>}
    </>
  );
}

Validation & Feedback

Because state already holds every value, validating is just deriving errors from that state. Store an errors object, check on submit, and clear each error as the user fixes it.

function LoginForm() {
  const [form, setForm] = useState({ email: '', password: '' });
  const [errors, setErrors] = useState({});

  const validate = () => {
    const next = {};
    if (!form.email) next.email = 'Email is required';
    else if (!/\S+@\S+\.\S+/.test(form.email)) next.email = 'Email is invalid';

    if (!form.password) next.password = 'Password is required';
    else if (form.password.length < 6) next.password = 'At least 6 characters';

    setErrors(next);
    return Object.keys(next).length === 0; // valid when no errors
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
    // Clear this field's error as soon as the user edits it.
    if (errors[name]) setErrors((prev) => ({ ...prev, [name]: '' }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) console.log('Valid! Submitting', form);
  };

  return (
    <form onSubmit={handleSubmit} noValidate>
      <input name="email" value={form.email} onChange={handleChange}
             aria-invalid={!!errors.email} />
      {errors.email && <span className="error">{errors.email}</span>}

      <input name="password" type="password"
             value={form.password} onChange={handleChange}
             aria-invalid={!!errors.password} />
      {errors.password && <span className="error">{errors.password}</span>}

      <button type="submit">Log in</button>
    </form>
  );
}

Uncontrolled Components

Sometimes you don't need React to track every keystroke — you just want the values when the form submits. An uncontrolled form lets the DOM hold the data and reads it with a ref, using defaultValue for initial content:

import { useRef } from 'react';

function QuickForm() {
  const formRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Pull all fields at once via the native FormData API.
    const data = Object.fromEntries(new FormData(formRef.current));
    console.log(data); // { name: '…', email: '…' }
  };

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <input name="name" defaultValue="Ada" />
      <input name="email" type="email" defaultValue="ada@example.com" />
      <button type="submit">Submit</button>
    </form>
  );
}

A Reusable useForm Hook

Once you've written a few forms, the pattern repeats: values, errors, a change handler, a submit handler. Extract it into a custom hook and every future form gets shorter.

function useForm(initialValues, validate) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [submitting, setSubmitting] = useState(false);

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setValues((prev) => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value,
    }));
  };

  // handleSubmit takes YOUR onSubmit and wraps it with validation.
  const handleSubmit = (onSubmit) => async (e) => {
    e.preventDefault();
    const found = validate ? validate(values) : {};
    setErrors(found);
    if (Object.keys(found).length === 0) {
      setSubmitting(true);
      await onSubmit(values);
      setSubmitting(false);
    }
  };

  const reset = () => { setValues(initialValues); setErrors({}); };

  return { values, errors, submitting, handleChange, handleSubmit, reset };
}

Using it, a login form collapses to almost nothing:

function Login() {
  const validate = (v) => {
    const e = {};
    if (!v.email) e.email = 'Required';
    if (!v.password) e.password = 'Required';
    return e;
  };

  const { values, errors, submitting, handleChange, handleSubmit } =
    useForm({ email: '', password: '' }, validate);

  const onSubmit = async (v) => {
    await fakeApiLogin(v);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="email" value={values.email} onChange={handleChange} />
      {errors.email && <span className="error">{errors.email}</span>}

      <input name="password" type="password"
             value={values.password} onChange={handleChange} />
      {errors.password && <span className="error">{errors.password}</span>}

      <button type="submit" disabled={submitting}>
        {submitting ? 'Logging in…' : 'Log in'}
      </button>
    </form>
  );
}

Practice & Quiz

function TweetBox() {
  const [text, setText] = useState('');
  const MAX = 280;
  // TODO: bind value/onChange, compute remaining, disable when over limit
}

function TweetBox() {
  const [text, setText] = useState('');
  const MAX = 280;
  const remaining = MAX - text.length;

  return (
    <div>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
      <p style={{ color: remaining < 0 ? 'crimson' : 'inherit' }}>
        {remaining} left
      </p>
      <button disabled={remaining < 0 || text.length === 0}>Post</button>
    </div>
  );
}

function PasswordPair() {
  const [form, setForm] = useState({ password: '', confirm: '' });
  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
  };
  const mismatch = form.confirm && form.password !== form.confirm;

  return (
    <>
      <input name="password" type="password"
             value={form.password} onChange={handleChange} />
      <input name="confirm" type="password"
             value={form.confirm} onChange={handleChange} />
      {mismatch && <span className="error">Passwords don't match</span>}
    </>
  );
}

Best Practices & Pitfalls

✅ Do

• Default to controlled components so state is the single source of truth
• Use the name attribute + [name]: value to share one handler across fields
• Bind checked for checkboxes/radios and value for everything text-like
• Give inputs <label>s (via htmlFor/id) and validate on both client and server

❌ Don't

• Set value without onChange — the field becomes accidentally read-only
• Mutate the state object directly; always spread into a new object
• Mix value and defaultValue on the same input
• Trust client-side validation as your only defense

// ❌ Starts undefined, becomes controlled after first keystroke → warning
const [name, setName] = useState();

// ✅ Initialize to an empty string so it's controlled from the start
const [name, setName] = useState('');

Summary

📚 Additional Resources

• React docs — <input> component reference
• React docs — Reacting to input with state
• React Hook Form — a popular forms library

🚀 What's Next?

Your forms produce data — often lists of it. Next up: Rendering Lists with map() — turning arrays into UI, the all-important key prop, and rendering collections efficiently.