File inputs are always uncontrolled
The input has no value prop: React only listens to it. The list on screen comes from state copied out of e.target.files. Pick your own files to see them listed.
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
picked: notes.txt 5 bytes