Empty state

Add code that shows a fallback message when the list is empty.

Empty state

The last piece is EmptyState: it shows a message when the list is empty. We do conditional render with items.length === 0.

Approach: {items.length === 0 ? <EmptyState /> : <ListBody items={items} />}. This is the ternary operator; we cover it in the conditional render lesson.

The empty message guides the user: "Add an item to your list". This is basic to good UX.

Three pieces join

ShoppingApp now joins three pieces: if data exists, show ListBody; otherwise show EmptyState. This is the skeleton of a small real app.

Splitting components makes each one easy to test and reuse on its own. We flowed the data through props; state comes in later groups.

This structure is the heart of React's "divide and conquer" philosophy.

Exercise EmptyState component

Complete the skeleton. Write an EmptyState component that returns <p className="empty">Your list is empty</p>. Export it.

Show example solution

function EmptyState() {
  return <p className="empty">Your list is empty</p>;
}

export default EmptyState;

Test yourself

What triggers the empty state?
```
The length property gives the item count.
```
- items is null
- items.length === 0
- never
- always
Show answer

items.length === 0 — items.length === 0 catches the empty list.

Empty state: fill in the missing part

{items.length === 0 ? <EmptyState /> : <ListBody items={____} />}

Show answer

{items.length === 0 ? <EmptyState /> : <ListBody items={items} />}

Empty state: match the terms

EmptyState

Empty message
ListBody

List body
Item

Single row
ShoppingApp

Shell

Next lesson: Events

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies