Skip to main content
ELYTE
MediumFrontendBuild

Notification Tray

Build a notification tray in React where a button and a tray are sibling components sharing state. Render `data-testid="add-btn"` — clicking it adds a notification. Render `data-testid="notification-tray"` containing ac...

Start problemBrowse all problems

What you will practice

TypeScriptReactState ManagementReact Patterns

Requirements

  • Render `add-btn` and `notification-tray`.
  • Clicking `add-btn` must add one active notification.
  • Each active notification must render with `data-testid="notification"`.
  • Each notification must include a `dismiss-btn`.
  • Clicking a dismiss button must remove only that notification.
  • Multiple notifications must remain independently visible until dismissed.
  • Do not use external state management libraries.

Starter files

App.tsxEditable starter

What the judge checks

  • Runs in the react environment with the react-testing-library runner.
  • Uses a 5000ms judge budget.
  • Requires test IDs: notification-tray, add-btn.
  • Checks repeated UI regions: notification.
  • Behavior rules include: Notification Appears On Add, Dismiss Removes Notification, Multiple Notifications Stack.

Constraints

  • Do not use external state management libraries (no Redux, Zustand, etc.)
  • The tray must always be present in the DOM, even when empty

Example behavior

Input
User clicks add-btn 3 times
Output
3 elements with data-testid="notification" are present in the tray

Follow-up

How would you add a maximum cap (e.g. only 5 notifications at once) and auto-dismiss after 3 seconds without breaking the existing dismiss-button behavior?