How do I handle an API response in React?
Read the response shape carefully, store the data in state, handle loading and error states, use a finally block to stop the spinner, render lists with stable keys, and handle empty results with a clear message. No blank screens anywhere.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in How to Handle and Render API Responses in a React UI
Because you assumed the data is a top-level array when it is nested inside an object. Log the full response and extract the array from the correct field before calling map on it.
To set loading to false whether the fetch succeeded or failed. If you only set it after success, an error leaves the spinner spinning forever. A finally block guarantees the loading state always ends.
Show an empty state with a helpful message. A successful fetch that returns no items is not an error, so do not show an error; show a message like 'No results found' so the user understands the state.
Still have questions?
Browse all our FAQs or reach out to our support team