How to Render Empty Lists and Fallback UI in React

To render empty lists in React, check the array length before you map. When the array has no items, show fallback UI instead of an empty container. That way the screen always explains what the user is looking at, and a clear fallback turns a confusing blank area into a useful message.

Here is the check as an early return:

App.jsx

function TaskList({ tasks }) {
  if (tasks.length === 0) {
    return <p>No tasks yet.</p>;
  }
  return <ul>{tasks.map((task) => <li key={task.id}>{task.title}</li>)}</ul>;
}

When tasks is empty, the page shows "No tasks yet." instead of an empty list. When tasks has items, the normal list renders.

The early return keeps the fallback separate from the list code, and each mapped item still gets a stable key. This pattern is the fastest way to guarantee the user never stares at a blank screen.

Keep the fallback next to the list

A ternary expresses the same choice inside the return statement. It reads well when the fallback is a single element and the list stays short.

App.jsx

function TaskList({ tasks }) {
  return tasks.length === 0 ? (
    <p>No tasks yet.</p>
  ) : (
    <ul>{tasks.map((task) => <li key={task.id}>{task.title}</li>)}</ul>
  );
}

Both branches now live side by side. Reading the return statement tells the whole story in one place: a message when empty, a list otherwise.

Pick the style that matches the surrounding code, then stay consistent across the component. Either form works, so the choice is about readability, not correctness.

Why the check looks at length

An empty array is truthy in JavaScript. Writing a condition on the array itself does not catch the empty case, because an empty array still counts as true.

Only checking the length answers the real question: are there zero items? The same check handles filtered results, where zero matches is a normal outcome rather than an error. That is why every empty-state example here compares length to zero instead of testing the array.

Decide what empty means

An empty array can mean three different things, and each one deserves a different message:

• Nothing has been added yet, so a new account shows "No tasks yet."
• A search returned no matches, so show "No tasks match your search."
• The data failed to load, which is an error state rather than an empty one.

When data comes from a network request, check loading and error states before the length check. Those states are separate from an empty result, and mixing them confuses the user about what actually happened. A short, specific message is worth more than a generic placeholder.

The list side is covered in the guide on rendering lists with map. For the branching itself, see the guide on conditional rendering in React.