Berechnen statt speichern

Diese Version der App hat einen neuen Button, Favoriten löschen, und einen Fehler. Probiere es aus: Markiere zwei Bands mit einem Stern und klicke dann auf Favoriten löschen. Die Sterne gehen aus, aber die Kopfzeile zeigt immer noch 2.

Die App hält die Zahl der Favoriten in einem zweiten State, anzahl, und jede Funktion, die favoriten ändert, muss auch anzahl ändern. favoritUmschalten tut das, aber leeren vergisst es. Zwei Werte im State, die zusammenpassen müssen, geraten aus dem Takt, sobald eine Stelle einen davon vergisst.

Aber die Zahl steckt schon in favoriten: Es ist favoriten.length. Speichere nicht im State, was du aus anderem State oder aus Props berechnen kannst. Berechne es beim Rendern, in der Funktion der Komponente:

const anzahl = favoriten.length;

Jeder Render berechnet sie neu aus den aktuellen favoriten, sie kann also nicht falsch sein, was auch immer das Array geändert hat. Dasselbe gilt für alles andere, was aus deinen Daten entsteht: Summen, gefilterte Listen, ob eine Liste leer ist. Nur was der Nutzer ändert, braucht State, und der Rest wird daraus berechnet.

Ein berechneter Wert kann auch eine ganze Liste sein. Welche Bands Favoriten sind, ist ein Filter des Programms:

const favoritenBands = bands.filter((band) => favoriten.includes(band.id));

Und daraus kannst du noch mehr berechnen, zum Beispiel die Namen, mit map() und join() zu einem Text zusammengefügt.