A list inside a list, keyed at each level
Both categories have a dish with key 1, and there is no warning: keys are compared only inside the same list.
Lists inside lists are a map inside a map, with keys at every level; when data arrives flat, group it first (with Object.groupBy or reduce) and then render the groups, and always decide what an empty list or an empty group should show.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Render const classes = [{ id: "5a", name: "5A", students: [{ roll: 1, name: "Isha" }, { roll: 2, name: "Kabir" }] }, { id: "5b", name: "5B", students: [{ roll: 1, name: "Neel" }] }] as headings with a list of students under each.
Given const words = ["apple", "avocado", "banana", "blueberry", "cherry"], render them grouped by first letter, letters in alphabetical order.
Write a ShoppingList that shows Your list is empty. when items is an empty array and a <ul> of item names otherwise.
Explain it without notes
How do you render nested data in React, and what are the key rules at each level?
Your API returns a flat array of orders, each with a status. How do you render them grouped by status, in a fixed order?
What makes a good empty state, and why should it be different from a loading state?
Why extract a component for each level of a nested list?
Preview
Console
Nothing logged yet.Expected console output
Starters: 2 dishes
Mains: 3 dishes