A value with no onChange is read-only
React warns about the first field only. The second one says readOnly, so React knows the missing onChange is on purpose.
A controlled input gets its value from React state and reports every keystroke through onChange, so the state is the one source of truth and the field always shows exactly what the state says.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a controlled <input> for a username that removes spaces as you type and shows @username below it.
Make a controlled <textarea> with a counter N characters left that starts at 100 and stops the user typing past 100.
Explain it without notes
What makes an input controlled? Walk through what happens on one keystroke.
Why does React warn when you pass value without onChange, and what are the three fixes?
How is React's onChange different from the DOM change event?
What does "single source of truth" mean for a form field, and why does it help?
Preview
Console
Nothing logged yet.Expected console output
You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.