ReactQuestion 10

Controlled and uncontrolled components?

Answer out loud or in your head first, then compare.

Answer

Controlled input:

JSX

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

<input
  value={name}
  onChange={e =>
    setName(e.target.value)
  }
/>

React controls the value.

Uncontrolled:

JSX

const inputRef = useRef();

<input ref={inputRef} />

The DOM holds the value.

Controlled inputs make these easier:

How did it go? Be honest — “Not yet” puts the question on your review list.