Nur Freitag

Oft willst du nicht jedes Element des Arrays, sondern nur einige: die Bands vom Freitag, die Bands auf der Hauptbühne, die Rockbands. filter() kennst du aus dem JavaScript-Kurs: Es macht ein neues Array aus den Elementen, für die seine Funktion true zurückgibt. Filtere also zuerst und wende map() dann auf das an, was übrig bleibt:

export default function App() {
    const hauptbuehne = bands.filter((band) => band.buehne === "Hauptbühne");

    return (
        <section>
            <h2>Hauptbühne</h2>
            {hauptbuehne.map((band) => (
                <BandKarte key={band.id} band={band} />
            ))}
        </section>
    );
}

Filtere in der Komponente vor dem return, wo du beliebiges JavaScript schreiben kannst, und speichere das Ergebnis in einer Konstanten, deren Name sagt, was darin steckt. Du könntest die beiden Methoden auch direkt im JSX verketten, {bands.filter(…).map(…)}, aber mit einem Namen ist der Code leichter zu lesen.

filter() verändert das ursprüngliche Array nicht, du kannst dasselbe bands also auf einer Seite auf mehrere Arten filtern: für jede Bühne, für jeden Tag. Jedes filter() macht ein eigenes Array.

Ein typischer Fehler ist ein einzelnes = in der Bedingung. (band) => band.tag = "Freitag" vergleicht nicht, sondern weist zu: Die Funktion setzt den Tag jeder Band auf Freitag und gibt den Text "Freitag" zurück, der als wahr gilt. Also werden alle Bands angezeigt, und alle am Freitag.