What is the difference between a controlled and an uncontrolled component?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import { useState, useRef } from 'react';

export default function Form() {
  const [controlled, setControlled] = useState('');
  const uncontrolledRef = useRef(null);

  function submit(e) {
    e.preventDefault();
    console.log('controlled  :', controlled);
    console.log('uncontrolled:', uncontrolledRef.current.value);
  }

  return (
    <form onSubmit={submit}>
      <input value={controlled} onChange={e => setControlled(e.target.value)} />
      <input defaultValue="initial" ref={uncontrolledRef} />
      <button type="submit">Send</button>
    </form>
  );
}