Einen Eintrag ändern

Oft ist der State ein Array aus Objekten, und eines davon muss sich ändern. Hier die Setliste von Nachtzüge, die Lieder, die sie spielen werden, jedes mit gespielt:

const [lieder, setLieder] = useState([
    { id: 1, titel: "Letzter Zug nach Hause", gespielt: false },
    { id: 2, titel: "Mitternachtsexpress", gespielt: false },
    { id: 3, titel: "Dampf und Rauch", gespielt: false },
]);

Um ein Lied als gespielt zu markieren, brauchst du ein neues Array, in dem dieses Lied ein neues Objekt mit gespielt: true ist und die anderen Lieder unverändert bleiben. Das ist map() mit einer Bedingung:

function alsGespieltMarkieren(id) {
    setLieder((lieder) =>
        lieder.map((lied) =>
            lied.id === id ? { ...lied, gespielt: true } : lied,
        ),
    );
}

map() erzeugt ein neues Array derselben Länge. Für jedes Lied gibt die Pfeilfunktion zurück, was ins neue Array kommt: für das Lied mit dieser id eine Kopie mit gespielt: true, für jedes andere das Lied selbst, unverändert. React bekommt ein neues Array, rendert, und die Seite zeigt das Lied als gespielt.

Was nicht funktioniert, ist das, was dir vielleicht zuerst einfällt: das Lied suchen und ändern, lied.gespielt = true;. Das ändert ein Objekt im State an Ort und Stelle, genau wie push(), React bekommt keinen neuen Wert, und die Seite ändert sich nicht.

Jetzt kennst du alle drei: Spread, um einen Eintrag zu einem Array im State hinzuzufügen, filter(), um einen zu entfernen, und map(), um einen zu ändern.