Problem 17
Notification Tray
MEDIUMBUILD
React+3
ReactTypeScriptState ManagementReact Patterns
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 active notifications. Each notification has data-testid="notification" and data-testid="dismiss-btn". Clicking dismiss removes only that notification; others remain. No external state management libraries.
Examples
Example 1
Input
User clicks add-btn 3 times
Output
3 elements with data-testid="notification" are present in the tray
Constraints
- Do not use external state management libraries (no Redux, Zustand, etc.)
- The tray must always be present in the DOM, even when empty
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?
Hints
http://localhost:3000/preview
Console output will appear here...