Shrnutí

V této lekci jste se naučili, že:

• map() promění pole dat na pole prvků a React pole ve složených závorkách ukáže prvek po prvku: {kapely.map((kapela) => <li key={kapela.id}>{kapela.nazev}</li>)}. Funguje to i s komponentami: <KartaKapely key={kapela.id} kapela={kapela} />.
• Každá položka seznamu potřebuje klíč, jedinečný v seznamu a pro tutéž položku pořád stejný, aby React položky poznal, když se seznam změní. Vezměte ho z dat (kapela.id), ne z pozice v poli. Patří na prvek, který vrací map(), a komponenta ho v props nedostane. Bez klíčů konzole varuje: Each child in a list should have a unique "key" prop.
• Co seznam ukáže, se rozhoduje před return: filter() vybere jen některé položky, sort() je seřadí jinak. sort() mění přímo pole, takže řaďte kopii: [...kapely].sort(…). Komponenta data, která dostane, nemění.
• if do složených závorek nepatří, ale před return ano. Předčasný návrat vyřídí zvláštní případ hned na začátku: if (kapely.length === 0) { return <p>Zatím tu nikdo nehraje.</p>; }. Komponenta, která nemá co ukázat, vrátí null.
• Podmíněný operátor podminka ? a : b dá a, když podmínka platí, a b, když neplatí. Je to výraz, a tak smí do JSX: pro text, prvek i atribut (className={kapela.den === "pátek" ? "karta patek" : "karta sobota"}).
• podminka && prvek dá prvek, nebo nic: false, true, null ani undefined React neukazuje. Čísla ale ukazuje a 0 && … dá 0, takže porovnávejte: lajky > 0 && ….

V další lekci, Miniprojekt: Kuchařka, spojíte komponenty, props, seznamy a podmínky ve vlastní aplikaci: v kuchařce.

Nejdřív si ale vše procvičte na seznamu festivalových vstupenek. Vstupenky jsou v App.jsx a zbytek je na vás.