Paths/Frontend Engineer/React Fundamentals / Rendering & Lists
Render a List Correctly
React identifies rows by key. Use the stable identifier from the data, and render an empty state instead of a blank list.
Validator
⏱ 0:00
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- File ~/frontend/src/components/OrderList.tsx exists○
- The component maps over the orders○
- The mapped rows use a stable key○
- The component handles the empty case○
02Walkthrough
1 of 3 revealed- 01
Write the empty state
An empty list is a state, not an absence. Say it in words the user understands.
echo 'import type { Order } from "../types/order";\nimport { OrderRow } from "./OrderRow";\n\ninterface OrderListProps {\n readonly orders: readonly Order[];\n}\n\nexport function OrderList({ orders }: OrderListProps) {\n if (orders.length === 0) {\n return <p className="empty-state">No orders yet.</p>;\n }' > ~/frontend/src/components/OrderList.tsx - 2 locked · each failed submit reveals one
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list