Změna jedné položky

Často je ve stavu pole objektů a změnit se má jeden z nich. Tady je setlist Nočních vlaků, písně, které zahrají, každá s vlastností zahrana:

const [pisne, setPisne] = useState([
    { id: 1, nazev: "Poslední vlak domů", zahrana: false },
    { id: 2, nazev: "Půlnoční rychlík", zahrana: false },
    { id: 3, nazev: "Pára a dým", zahrana: false },
]);

Abyste jednu píseň označili jako zahranou, potřebujete nové pole, ve kterém je ta píseň novým objektem se zahrana: true a ostatní písně jsou, jak byly. To je map() s podmínkou:

function oznacZahranou(id) {
    setPisne((pisne) =>
        pisne.map((pisen) =>
            pisen.id === id ? { ...pisen, zahrana: true } : pisen,
        ),
    );
}

map() vytvoří nové pole stejné délky. Jeho šipková funkce pro každou píseň vrátí, co přijde do nového pole: pro píseň s tím id kopii se zahrana: true a pro všechny ostatní samotnou píseň, beze změny. React dostane nové pole, vykreslí ho a stránka píseň ukáže jako zahranou.

Nefunguje to, co by vás možná napadlo jako první: píseň najít a změnit, pisen.zahrana = true;. Tím se objekt uvnitř stavu změní přímo, stejně jako u push(), takže React nedostane novou hodnotu a stránka se nezmění.

Teď znáte všechny tři způsoby: tři tečky pro přidání položky do pole ve stavu, filter() pro odebrání a map() pro změnu.