Controlled inputs

A controlled input takes its value from React state and reports changes through onChange, so the state is always the truth. It makes validation, formatting and resetting straightforward.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what makes an input controlled and where its value lives
Write a controlled text input and checkbox
Spot the value without onChange and the undefined initial state

In practice

A few lines that show Controlled inputs doing its job.

TSX

function NameField() {
  const [name, setName] = useState("");
  return (
    <label>
      Name
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        maxLength={40}
      />
    </label>
  );
}

The common mistake

Watch for

Setting value without onChange, which makes the input read-only and triggers a console warning. Or starting the state as undefined, which switches the input from uncontrolled to controlled mid-life.

What to know first

Your roadmap puts these before Controlled inputs, unless you already know them.

How it stays learned

Once a session shows you understand Controlled inputs, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Where it leads

Topics that build on Controlled inputs.

Form submission

Next in the moduleForm submission →