Objekty ve stavu

Hodnoty, které patří k sobě, mohou sdílet jeden stav, a to objekt. Objednávka vstupenek má druh a počet:

const [vstupenka, setVstupenka] = useState({ druh: "Víkend", pocet: 1 });

Stránka ho čte jako každý jiný objekt: {vstupenka.pocet} × {vstupenka.druh} ukáže 1 × Víkend. Pro změny platí stejné pravidlo jako u polí: objekt ve stavu neměňte (vstupenka.pocet = 2 nic nového neukáže), vytvořte nový. Tři tečky objekt zkopírují a vlastnost napsaná za nimi tu z kopie nahradí:

const novaVstupenka = { ...vstupenka, pocet: 2 };

novaVstupenka má všechno, co měla vstupenka, i druh, a pocet je 2. Bez tří teček by setVstupenka({ pocet: 2 }) o druh přišla: funkce set… nahradí celý stav, nový objekt se starým nespojuje.

Stejně jako nové pole patří i nový objekt vytvořený ze starého do aktualizační funkce. Tady přičte k počtu 1. Jedna drobnost: když šipková funkce vrací objekt, potřebuje ho v kulatých závorkách:

function pridejVstupenku() {
    setVstupenka((vstupenka) => ({ ...vstupenka, pocet: vstupenka.pocet + 1 }));
}

Bez nich by složené závorky byly tělo funkce, jako v (vstupenka) => { return …; }, a ...vstupenka v těle funkce je chyba: červená zpráva pod náhledem hlásí Unexpected token, expected "," a aplikace se nespustí. Kulaté závorky ze složených udělají objekt, který šipková funkce vrátí.

Fungovaly by i dvě stavové proměnné, druh a pocet. Objekt se hodí, když hodnoty popisují jednu věc a mění se spolu, jako objednávka vstupenek.