Seznam karet

map() umí proměnit data i na komponenty, nejen na li. V lekci Props jste psali jednu KartaKapely pro každou kapelu. Pro pět kapel je to pět řádků, pro padesát by jich bylo padesát a každá nová kapela v datech by potřebovala další. Jedno map() je ukáže všechny:

{kapely.map((kapela) => (
    <KartaKapely key={kapela.id} kapela={kapela} />
))}

Pro každou kapelu vrátí map() jednu KartaKapely a předá jí kapelu v props. Klíč patří na prvek, který map() vrací, tady tedy na KartaKapely. Položkami seznamu jsou karty, ne prvky article uvnitř nich.

Data jsou teď v samostatném souboru kapely.js. Je to obyčejný soubor JavaScriptu bez JSX, který pole exportuje: export const kapely = [ … ];. App.jsx ho importuje pojmenovaným importem, jak ho znáte z lekce Komponenty: import { kapely } from "./kapely.js";. Když jsou data ve vlastním souboru, zůstanou komponenty krátké a stejná data může importovat víc komponent.

Typické chyby:

• Klíč uvnitř KartaKapely, na jejím article. React potřebuje klíč na položkách seznamu, a v KartaKapely žádný seznam není, jen jeden article. Konzole varuje dál.
• Čtení klíče v KartaKapely. key do props nepatří, takže function KartaKapely({ key }) dostane undefined a konzole varuje: KartaKapely: `key` is not a prop. Když karta id potřebuje, má kapela.id.