Controlled components (React)
In React, a controlled component refers to a form input that is controlled by React. By 'controlled', it means that React controls the value of the form input — the form input itself doesn't have this control.
More details
In order to make a form input controlled in React, we just ought to set a value
prop on it. For example, the following <input>
element is controlled:
function TextInput() {
const [value, setValue] = useState('');
return (
<input type="text" value={value} onChange={e => setValue(e.target.value)} />
);
}