Learn React 19: The Complete Guide to Modern Web Apps/

...

/

Challenge: Build a Theme and Notifications Panel

Challenge: Build a Theme and Notifications Panel

Build a small theme and notifications settings panel that uses a segmented theme context, a reducer-based reusable toggle component, and a correct derived state for a summary counter.

We'll cover the following...

Problem statement

You are tasked with building a SettingsPanel component that allows users to manage theme preferences and notification settings. This panel will be part of a larger application, so it should be modular, reusable, and follow good React architecture patterns. The panel consists of two main sections: Theme and Notifications.

  • Theme section:

    • Toggle between light and dark modes using a labeled toggle (“Dark mode”).

    • Display current theme: Current theme: light or Current theme: dark.

    • Manage theme globally via useReducer with segmented context (state and dispatch ...

Ask