Extract a list item component
TeamList decides which people and in what order; PersonCard decides how one person looks. Change the card once and every row changes.
To show a list, keep the data in an array and turn every item into an element with map; use filter first to choose which items appear, and move the look of one item into its own component.
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.
Given const cities = ["Delhi", "Mumbai", "Chennai"], render them as an ordered list (<ol>).
Given an array of { id, name, inStock } products, render only the ones in stock, each as <li> with the name.
Extract a ScoreRow component that shows a player's name and score, and a ScoreBoard that renders an array of { id, name, score } with it.
Explain it without notes
How do you render a list in React? Why map and not forEach or a for loop inside JSX?
Why should a filtered list be calculated during render rather than stored in state?
When should you extract a list item into its own component, and where does the key go then?
A list renders nothing and the console is empty. What are the usual causes?
Preview
Console
Nothing logged yet.