Controlled Components

In React, form elements like <input> are called controlled components when their value is managed by React state.

function FormExample() {
  const [name, setName] = useState("");

  const handleChange = (e) => setName(e.target.value);

  return (
    <form>
      <input type="text" value={name} onChange={handleChange} />
      <p>Hello, {name}</p>
    </form>
  );
}

• The input field value is synced with the state.
• React becomes the “single source of truth” for the input's value.