Description

A settings panel merges user preferences with app defaults and displays the active settings.

Anomaly

The page loads showing "Theme: dark" even though the user's saved preference is light. Clicking Toggle has no visible effect.

Constraint
Do not change the state, the toggle logic, or the JSX
Hint
Consult the SenseiOnly for those truly stuck · Flip to reveal

Look at the line where `active` is computed.

Loading editor…
Correct Solution
Loading...

Why this fixes it

In spread syntax the rightmost object wins on key conflicts - `{ ...userPrefs, ...DEFAULTS }` meant `DEFAULTS.theme` always overwrote `userPrefs.theme`. Flipping to `{ ...DEFAULTS, ...userPrefs }` puts user preferences last so they win every conflict with the defaults.

Expected OutputGoal State
Your OutputLive