Shrnutí

V této lekci jste se naučili, že:

• Stav je hodnota, kterou si React pro komponentu pamatuje mezi vykresleními: const [lajky, setLajky] = useState(0); s import { useState } from "react";. Obyčejná proměnná začíná při každém vykreslení znovu a její změna stránku nezmění.
• Když zavoláte funkci set…, React komponentu znovu vykreslí s novou hodnotou a stránku podle toho upraví. Stránku sami neměníte a stav měníte jen jeho funkcí set….
• Komponenta může mít několik stavových proměnných jakéhokoli druhu: čísla, text, booleovské hodnoty (setOtevrene((otevrene) => !otevrene) pro ukázání a skrytí), pole i objekty. Co se dá ze stavu spočítat, spočítejte při vykreslování.
• Každé místo, kde je komponenta použitá, má vlastní stav: tři KartaKapely, tři počítadla.
• Nová hodnota přijde až s dalším vykreslením. V obsluze má stavová proměnná pořád tu starou. Když novou potřebujete, nejdřív ji spočítejte do konstanty.
• Když se nová hodnota počítá ze staré, předejte funkci set… aktualizační funkci: setLajky((lajky) => lajky + 1). React zavolá funkce z fronty popořadě, každou s nejnovější hodnotou.
• Stav nikdy neměňte přímo. Vytvořte nové pole nebo objekt: přidávejte třemi tečkami ([...program, id]), odebírejte pomocí filter(), jednu položku změňte pomocí map() a { ...pisen, zahrana: true } a objekt pomocí { ...vstupenka, pocet: 2 }. Po push() nebo vstupenka.pocet = 2 je ve stavu pořád stejná hodnota a React nevykreslí nic.

V další lekci, Formuláře, propojíte se stavem textová pole, zaškrtávací políčka a rozbalovací seznamy a z formuláře budete přidávat nové položky do seznamu.

Nejdřív si ale vše procvičte na hlasování o kapelu festivalu.