V tomto cvičení vdechneme život aplikaci, která umožňuje vybrat si různé ingredience na objednávanou pizzu. Uživatel uvidí seznam ingrediencí a bude moci si zaškrtnout, které ingredience chce na své pizze.
Naklonujte si repozitář se zadáním projektu. Prohlédněte si strukturu kódu a vyzkoušejte si fungování aplikace.
Budeme chtít abychom dokázali zobrazit počet zašrktnutých ingrediencí a jejich celkovou cenu. Všimněte si, že komponenta Check je uncontrolled, spravuje tedy svůj vlastní stav.
Jako první krok povyšte stav komponenty Check o jednu úroveň nahoru, tedy do komponenty Topping. Komponenta Check tak bude mít props checked a onChange.
Abychom dokázali zobrazit počet zaškrnutých ingrediencí, bude potřeba povýšit stav až do komponenty ToppingsSelect. Podobně jako v lekci k tomu využijte připravené pole toppings. Každý objekt obsahuje vlastnost selected, který by se měla měnit v závislosti na tom, co uživatel zaškrtnul.
Rozšiřte aplikaci tak, aby zobrazovala také celkovou cenu.