Controlled components

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.

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)} />
   );
}