Načtení programu

Teď stránka s programem. Program se načítá z program.json, stejně jako v projektu Program kina, jen ho teď načte efekt, jako v lekci Efekty. Program je stav, na začátku prázdné pole, a efekt se závislostmi [] načte soubor, když se komponenta Program objeví:

const [program, setProgram] = useState([]);

useEffect(() => {
    async function nactiProgram() {
        const odpoved = await fetch("program.json");
        setProgram(await odpoved.json());
    }
    nactiProgram();
}, []);

V tabulce map() vytvoří pro každé představení řádek s jeho id jako klíčem: čtyři buňky se dnem, časem, filmem a sálem a pátou s tlačítkem Vybrat místa. V projektu Kino v Tailwindu dával skript tomu tlačítku třídy pomocí tlacitko.className = "…". V JSX je napíšete přímo k tlačítku, jako ke každému jinému prvku.

Pokaždé, když otevřete program, objeví se komponenta Program na stránce znovu, takže její efekt proběhne znovu a načte soubor znovu. Když přejdete na úvod, React komponentu ze stránky odebere, a s ní i její stav. Tady to nevadí: soubor je malý a program se mezitím mohl změnit.

Zatímco je soubor na cestě, stránka píše Načítám…, a když server odpoví chybou, napíše to, stejně jako stará stránka. To jsou další dva stavy, nacitani a chyba, jako v lekci Efekty. Než data přečtete, zkontrolujte odpoved.ok.