Deviopath › React

Notification Center

Medium · Lists

Build a notification center for the INITIAL notifications.

Render <h2>Notifications <span className="unread-count">3</span></h2> with the number of unread notifications, then three buttons: "All", "Unread" (filters) and "Mark all as read" (disabled when nothing is unread).

Each notification is <li className="notification unread"> (or "notification read") containing <span className="text">, a "Mark as read" button (only for unread ones) and a "Dismiss" button that removes it.

- The "Unread" filter shows only unread notifications; "All" shows everything. A notification marked as read disappears from the "Unread" view right away.

- When no notifications are visible, show <p className="empty">No notifications</p> instead of the list.

Next: Focus with useRef