The whole crew

We have six astronauts. Show them all.

Hardcoding three <Card> tags works. Six would be tedious. Sixty would be a sin.

Put the data in an array. Use .map() in the template to render one card per item. The {...a} bit spreads every property of the astronaut into props — a tidy trick.

It's all wired up below. Add a 4th astronaut and watch a new card appear without touching the template.

✦ src/pages/index.astro — rendering a list live

--- import Card from "~/components/Card.astro"; const crew = [ { name: "Mae", mission: "Endeavour" }, { name: "Ovidiu", mission: "Apollo 42" }, { name: "Sergei", mission: "Soyuz 11" }, ]; --- <div> {crew.map(a => <Card {...a} />)} </div> ⚠ JavaScript is disabled. The editor needs it to highlight and run your code.

Same component, many cards, zero copy-paste . You just made a dashboard.

— page 5 —

in the binder open binder →

Spread props↗.map() over a list↗

saved a moment ago

progress 45%

earn +75 XP

◄ Pass them around next: Status check →