Výběr míst

Kliknutí na Vybrat místa otevře výběr míst. Je to samostatná komponenta, VyberMist, a editor ji má připravenou ve VyberMist.jsx: kartu s nadpisem a prázdnou mřížkou. Zvolené představení dostane v props predstaveni. Které představení je zvolené, je stav komponenty Program, zvolene: na začátku null, když žádné není, a po kliknutí na tlačítko objekt představení. Výběr se ukáže, jen když nějaké zvolené je, pomocí &&:

{zvolene !== null && (
    <VyberMist key={zvolene.id} predstaveni={zvolene} />
)}

Klíč je tu ze stejného důvodu jako u kartiček v závěrečném projektu kurzu Reactu. Výběr si bude pamatovat, která místa návštěvník vybral. Kdyby pak návštěvník zvolil jiné představení, React by si bez klíče ponechal stejnou komponentu VyberMist, jen s jinými props, a místa vybraná na pátek by zůstala vybraná i na sobotu. S jiným klíčem pro každé představení vytvoří React nový výběr, ve kterém není vybrané nic.

Místa. Na začátku VyberMist.jsx je pole mista s názvy všech 40 míst, od A1 po E8, vytvořené dvěma cykly jako ve starém skriptu. V mřížce z nich map() udělá tlačítka. Prodané místo, tedy místo v predstaveni.obsazeno, je vypnuté a dostane třídu obsazene. Místo, které si návštěvník vybere, dostane třídu vybrane. Místo může mít víc tříd, takže className je tentokrát šablonový řetězec: vždy misto a k tomu každá z dalších dvou tříd, nebo nic, pomocí podmíněného operátoru:

className={`misto ${jeObsazene(misto) ? "obsazene" : ""} ${vybrana.includes(misto) ? "vybrane" : ""}`}

Pro volné místo, které není vybrané, vyjde "misto " se dvěma mezerami na konci, což nevadí: mezery jen oddělují třídy.

Vybraná místa jsou pole ve stavu, vybrana, na začátku prázdné. Kliknutí na místo ho do pole přidá pomocí tří teček (spread), nebo ho z něj pomocí filter() odebere, když už vybrané je, jako ve cvičeních Přidání do pole a Odebrání z pole v lekci Stav. Pod mřížkou výběr ukáže, kolik míst je vybraných a kolik stojí: jejich počet krát cena představení, predstaveni.cena.