Jen pátek

Často nechcete ukázat všechny prvky pole, jen některé: kapely z pátku, kapely na hlavním pódiu, rockové kapely. Z kurzu JavaScriptu znáte filter(): vytvoří nové pole z prvků, pro které jeho funkce vrátí true. Nejdřív tedy filtrujte a pak použijte map() na to, co zbylo:

export default function App() {
    const hlavni = kapely.filter((kapela) => kapela.podium === "Hlavní pódium");

    return (
        <section>
            <h2>Hlavní pódium</h2>
            {hlavni.map((kapela) => (
                <KartaKapely key={kapela.id} kapela={kapela} />
            ))}
        </section>
    );
}

Filtrujte v komponentě před return, kde smíte psát jakýkoli JavaScript, a výsledek uložte do konstanty s názvem, který říká, co v ní je. Obě metody byste mohli zřetězit i přímo v JSX, {kapely.filter(…).map(…)}, ale s názvem se kód čte líp.

filter() původní pole nemění, takže stejné pole kapely můžete na jedné stránce filtrovat několika způsoby: pro každé pódium, pro každý den. Každé filter() vytvoří vlastní pole.

Typická chyba je jedno = v podmínce. (kapela) => kapela.den = "pátek" neporovnává, ale přiřazuje: funkce změní den každé kapely na pátek a vrátí text "pátek", který se počítá jako pravda. Ukážou se tak všechny kapely, a všechny v pátek.