Why does a controlled input stop accepting typing in React?
A controlled input shows exactly what its value prop says. If you set value without an onChange that updates state, React keeps resetting it to the old value, so the field looks frozen and also warns in the console.
Explain it simply
A controlled input is like a notice board where React holds the chalk. Whatever you type is only a request. If nobody updates the board's text in state, the text snaps back to the old content after each key press.
So the pair value and onChange must always go together. The handler takes e.target.value, saves it to state, and the new render shows that value.
Other causes of a frozen field: updating the wrong state key, or setting value={undefined} first and a string later, which switches between uncontrolled and controlled.
A quick debugging checklist: confirm that value comes from state, that onChange calls the setter with e.target.value, that the setter belongs to the same key, and that the initial state is a string rather than undefined.
Example
// Frozen: value without onChange
<input value="Asha" />
// Works
function Name() {
const [name, setName] = useState("");
return <input value={name} onChange={e => setName(e.target.value)} />;
}
// If you only want a starting value, use defaultValue
<input defaultValue="Asha" />What to say in the interview
"A controlled input renders whatever the value prop says, so value needs an onChange that writes to state. Without it, the field resets on each key press. If I only need an initial value, I use defaultValue and make the input uncontrolled."
Common mistakes
- Initialising state as undefined, then switching to a string.