A name editor shows a text input and a saved name label, letting the user type a new name and reset to the default.
Type "Bob" in the input field, click outside - the saved label shows "Bob". Click Reset - the label correctly reverts to "Alice" but the input field still shows "Bob". The input and the label are out of sync.
How does React know to update an input's displayed value after state changes?
How does React know to update an input's displayed value after state changes?
Why this fixes it
Using `defaultValue` instead of `value` makes the input uncontrolled - React sets the initial DOM value once on mount and then steps back; subsequent state changes have no effect on what the input displays. Replacing `defaultValue` with `value={name}` and adding `onChange` converts the input to controlled, meaning React drives the displayed value from state on every render. When Reset fires, the `value` prop forces the input field to reflect the new state.