Etwas aus einem Array entfernen
Zu einem Zeitplan gehört auch, dass man eine Band wieder herausnehmen kann. Ändere auch hier nicht das Array im State: Erzeuge ein neues ohne den Eintrag. Genau das macht filter(). Die Methode erzeugt ein neues Array aus den Einträgen, für die ihre Funktion true zurückgibt:
function entfernen(id) {
setZeitplan((zeitplan) => zeitplan.filter((bandId) => bandId !== id));
}Jede Id, die nicht id ist, bleibt, das neue Array enthält also alles außer der entfernten Band. Methoden, die ein Array an Ort und Stelle ändern, wie pop() oder sort(), sind für State genauso falsch wie push(). Spread, filter() und map() erzeugen neue Arrays, also nimm diese. (Brauchst du eine sortierte Liste, sortiere eine Kopie: [...bands].sort(…).)
Nach dem Entfernen ist die Band nicht mehr in zeitplan, und alles, was davon abhängt, ändert sich beim nächsten Rendern: meineBands enthält sie nicht mehr, und die Bedingung aus der letzten Übung zeigt ihren Hinzufügen-Button wieder. Das ist ein einziger State, und die Seite folgt ihm überall.
Ist der Zeitplan leer, steht die Überschrift Mein Zeitplan über nichts. Das ist ein Fall für eine Bedingung aus der Lektion Listen und Bedingungen: Mit ? : zeigst du je nach zeitplan.length entweder einen Absatz mit einer Meldung oder die Liste.
So schreibst du es:
Anweisungen
- 1
Gib jeder Band unter Mein Zeitplan einen Button Entfernen, der ihre Id mit
filter()auszeitplannimmt. Die Band bekommt dann ihren Hinzufügen-Button zurück. - 2
Ist der Zeitplan leer, zeige statt der Liste den Absatz
Dein Zeitplan ist noch leer.an.