Transforming input as you type
Type save 10! in the coupon box: it becomes SAVE10. Type letters in the phone box: nothing appears, because the handler throws them away before they reach state.
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.