How do you render a list in React and handle the empty case?
Use array.map inside JSX to turn data into elements with keys. Check the array length first and show an empty-state message when there is nothing to display, instead of rendering a blank area.
Explain it simply
A list screen has three states: loading, empty and filled. Beginners handle only the third, and users see a confusing blank page when there is no data.
items.map(...) returns an array of elements. For an empty array it returns an empty array and renders nothing. So test items.length === 0 before and show a helpful message, like "No orders yet".
When filtering, do the filter before the map and compute the filtered array once, so the empty check uses the filtered result.
Keep the three states visible in the code: if the data is loading show a skeleton or spinner, if the request failed show an error with a retry button, and only then decide between the empty message and the list. Treating them as one case is the most common reason list screens feel broken.
Example
function Orders({ orders }) {
if (orders.length === 0) return <p>No orders yet</p>;
return (
<ul>
{orders.map(o => (
<li key={o.id}>{o.item} - Rs {o.price}</li>
))}
</ul>
);
}What to say in the interview
"I map data to elements with stable keys and handle the empty state explicitly with a message, along with loading and error states. If filtering, I compute the filtered array first and check its length."
Common mistakes
- Using orders.length && <List /> which renders the number 0 when empty.