A controlled input in React ignores every keystroke

Why won't this text field let me type anything?

BeginnerRead 3 minDoing: under 30 minutes5 steps

What you'll have at the end

The Email field updates on every keystroke because its onChange calls the same setter its value prop reads, and every other field in the form was checked for the identical mistake.

Before you start

You need

A React form with at least one text input using the value prop plus an onChange handler, where typing into that field produces no visible change.

Not covered

Rebuilding the field as an uncontrolled input with a ref instead of state; that pattern solves a different problem and won't repair a mismatched setter.

Leans on

Rule out the simple cause first

Reproduce it, then read the console
Compare what value reads to onChange

Fix it and prove it's really fixed

Point onChange at the right setter
Check every other field for the same slip
Confirm every field owns its keystrokes

Where to go next

Pull duplicated logic out of two components into your own custom hook

For a form with many similar fields, since wrapping the value and onChange pair in your own hook removes the copy-paste step that caused this bug in the first place.

Checked 22 Aug 2026

Part of the React Frontend Framework cookbook