Problem 16
Add Error Handling and Retry to Data Fetcher
MEDIUMEXTEND
React+3
ReactTypeScriptAsync PatternsError Handling
A data fetcher component loads items but silently swallows errors with no recovery path. Extend it: show data-testid="loading-indicator" while pending; on rejection show data-testid="error-message" and data-testid="retry-button" (hide loading); clicking retry re-fetches and shows loading again; on success render data-testid="data-list" with one data-testid="data-item" per item. Do not call fetchData more than once on initial mount.
Examples
Example 1
Input
`fetchData` rejects
Output
`error-message` and `retry-button` appear; `loading-indicator` is hidden
Constraints
- Error and loading states must be mutually exclusive
- Retry button must only appear after a failed fetch — not during loading or after success
Follow-up
How would you add a maximum retry count (e.g. give up after 3 attempts) without changing the existing test behavior?
Hints
http://localhost:3000/preview
Console output will appear here...