Reading uncontrolled fields with a ref and with FormData
One render only: typing doesn't re-render an uncontrolled form. An unticked checkbox is missing from FormData, so get gives null. Change the email and press Subscribe to see the new value.
An uncontrolled input keeps its own value in the DOM: you give it a starting value with defaultValue or defaultChecked and read it when you need it, with a ref or with FormData; file inputs are always uncontrolled.
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.
Build an uncontrolled search form with defaultValue="pizza" that logs the query on submit using FormData.
Build an uncontrolled Remember me checkbox that starts ticked and logs true or false when a button is clicked, using a ref.
Explain it without notes
What is an uncontrolled input, and how do you set its starting value?
Compare reading an uncontrolled field with a ref and with FormData.
Why is a file input always uncontrolled, and how do you work with it in React?
What causes the "changing an uncontrolled input to be controlled" warning and how do you fix it?
When would you choose controlled over uncontrolled, and the other way round?
Preview
Console
Nothing logged yet.Expected console output
Newsletter rendered
ref reads: asha@example.com
FormData reads: asha@example.com on null