Výběr dne

Na řadě jsou tlačítka dnů. Jejich JSX je hotové v TlacitkaDnu.jsx a potřebují dvě věci: vědět, který den je zvolený, aby ho ukázala zlatě, a umět zvolit jiný. Zvolený den ale potřebuje i tabulka, která ukazuje jen představení toho dne. Dvě komponenty potřebují stejný stav, takže se přesune výš, do jejich nejbližšího společného rodiče, jako v lekci Sdílený stav. Tabulka je přímo v komponentě Program, takže stav den bude tam, na začátku "vše", a komponenta TlacitkaDnu ho dostane v props, spolu s funkcí, která ho mění:

<TlacitkaDnu den={den} onVybratDen={setDen} />

Která představení tabulka ukazuje, není samostatný stav: spočítá se při každém vykreslení z program a den a tabulka pak na řádky převádí zobrazena místo program:

let zobrazena = program;
if (den !== "vše") {
    zobrazena = program.filter((predstaveni) => predstaveni.den === den);
}

Zlaté tlačítko. V projektu Kino v Tailwindu přesouval skript třídu aktivni z tlačítka na tlačítko. V Reactu každé vykreslení spočítá třídy všech tlačítek znovu ze stavu. Tlačítko zvoleného dne dostane den aktivni, ostatní jen den, pomocí podmíněného operátoru v className:

className={den === "Pátek" ? "den aktivni" : "den"}

Tři tlačítka dnů se liší jen dnem, takže mohou vzniknout z pole pomocí map(): const dny = ["Pátek", "Sobota", "Neděle"]; nad komponentou a tlačítko Všechny dny samostatně před nimi. Klíčem každého tlačítka je jeho den.

Třídy den a aktivni zůstanou ve style.css, jako v projektu Kino v Tailwindu. JSX by ale mohlo vybírat i mezi celými sadami tříd Tailwindu, třeba "bg-zlata text-noc" a "bg-white". Skript by na to musel třídy i odebírat: přidával třídu k těm, které už tlačítko mělo, a ze dvou tříd pro pozadí vyhrává ta, která je v CSS Tailwindu později. Podmíněný operátor dá každému tlačítku jen jednu ze sad, takže se o pozadí žádné dvě třídy nepřetahují.