Handling Empty Lists

Requirement

Understand what to show the user when the array length is 0 (combining conditional rendering with lists).

Assignments (Start First)

1. Simple beginner UI task: Create a TodoList component. Map over an array of tasks. If the array is empty, return a simple <p>No tasks yet!</p> instead of the list.
2. Slightly improved version: Instead of returning a plain paragraph, create a dedicated EmptyStateCard component that shows an illustration and a "Create your first task" button, and render that when the array is empty.
3. Practical real-world component: Build an InboxView component. If the emails array has items, map over them. If it's empty, show an empty state indicating "You're all caught up!".
4. "The Escalation": Create a CartView. If the cart has items, render the items and a "Checkout" button. If the cart is empty, render a "Your cart is empty" message and a "Start Shopping" button that alerts a message when clicked.

Lessons (Optional)

• Array.length: You can check if an array is empty using array.length === 0.
• Early Returns for Empty States: Often, the cleanest way to handle an empty list is to use an early return at the top of your component.

The Summary and Quizzes

1. Concept explanation: Empty states are crucial for user experience. They guide the user on what to do next when there is no data to show.
2. Why it works in React: Because React components are just JavaScript functions, you can easily use an if statement to return entirely different JSX based on the length of an array.
3. Challenge question: Write the if statement you would use to return an <EmptyList /> component if an array named users has no items.