Controlled vs Uncontrolled Components Quiz
Four checks on the controlled / uncontrolled split for React form inputs, including the file-input edge case and the warning React emits when you flip between defaultValue and value.
Question Bank
Medium
JavaScript
4 questions
quiz
react
hooks
js-dom
492 views
4
Convert this uncontrolled <input> into a controlled input that mirrors its value into React state.
function NameField() {
return <input type="text" defaultValue="alice" />;
}Why is <input type="file"> always uncontrolled in React, no matter how you write it? What is the correct way to access the chosen file?
React logs A component is changing a controlled input to be uncontrolled when this code runs. What is wrong, and what is the fix?
import { useState } from 'react';
function Email() {
const [email, setEmail] = useState();
return (
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
);
}When should you reach for an uncontrolled input on purpose? Give one realistic scenario.