Etwas zu einem Array hinzufügen

State kann auch ein Array enthalten. Hier ist „Mein Zeitplan“, die Bands, die du nicht verpassen willst. Der State enthält ihre Ids und beginnt als leeres Array:

const [zeitplan, setZeitplan] = useState([]);

Um eine Band hinzuzufügen, könntest du zu push() greifen. Tu es nicht. push() verändert das Array, das React aufbewahrt, und React merkt es nicht: Es bemerkt eine Änderung nur, wenn der Setter einen anderen Wert bekommt als den, den der State hatte, und dasselbe Array, auch mit einem Eintrag mehr, ist kein anderer Wert. Ändere also nie einen Wert, der im State liegt. Erzeuge ein neues Array und gib dieses dem Setter.

Der Spread aus dem JavaScript-Kurs erzeugt eines: [...zeitplan, id] ist ein neues Array mit allem aus zeitplan und id am Ende. Es wird aus dem alten Array gebildet, gehört also in eine Updater-Funktion:

function hinzufuegen(id) {
    setZeitplan((zeitplan) => [...zeitplan, id]);
}

Um den Zeitplan anzuzeigen, suche beim Rendern die Bands heraus, deren Ids darin stehen:

const meineBands = bands.filter((band) => zeitplan.includes(band.id));

<ul className="zeitplan">
    {meineBands.map((band) => (
        <li key={band.id}>{band.name}</li>
    ))}
</ul>

Warum Ids und nicht ganze Band-Objekte? Die Daten über die Bands bleiben an einer Stelle, in bands, und der State enthält nur, was der Besucher ausgewählt hat. Bei jedem Rendern bringt filter() beides zusammen.