Controlled Inputs (Two-Way Binding)

Snippet

Controlled Inputs (Two-Way Binding)

A controlled component has its value driven by React state. The 'value' prop sets the current text, and 'onChange' updates the state whenever the user types, keeping the UI and state in sync.

snippet.js
javascript
function NameForm() {
  const [name, setName] = useState('');
 
  return (
    <input 
      type="text" 
      value={name} 
      onChange={(e) => setName(e.target.value)} 
    />
  );
}

react

Breakdown

value={name}

Links the input's displayed value to the 'name' state variable.

onChange={(e) => setName(e.target.value)}

An event handler that captures the user input from the event object and updates the state.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Controlled Inputs (Two-Way Binding)

Related