Počítat, ne ukládat

Tato verze aplikace má nové tlačítko Zrušit oblíbené, a taky chybu. Vyzkoušejte to: označte hvězdou dvě kapely a pak klikněte na Zrušit oblíbené. Hvězdy zhasnou, ale hlavička pořád říká 2.

Aplikace si počet oblíbených drží v druhé stavové proměnné, pocet, a každá funkce, která mění oblibene, musí měnit i pocet. prepniOblibenou to dělá, ale zrusOblibene na to zapomíná. Dvě stavové proměnné, které se musí shodovat, se rozejdou, jakmile na jednu z nich některá funkce zapomene.

Jenže počet už v oblibene je: oblibene.length. Co můžete spočítat z jiného stavu nebo z props, ve stavu nedržte. Spočítejte to při vykreslení, ve funkci komponenty:

const pocet = oblibene.length;

Každé vykreslení to spočítá znovu z aktuálního oblibene, takže to nemůže být špatně, ať pole změnila kterákoli funkce. Stejně je to se vším ostatním, co vzniká z vašich dat: součty, vyfiltrované seznamy, jestli je seznam prázdný. Stav potřebuje jen to, co mění uživatel, a zbytek se z toho spočítá.

Spočítaná hodnota může být i celý seznam. Oblíbené kapely dostanete filtrem programu:

const oblibeneKapely = kapely.filter((kapela) => oblibene.includes(kapela.id));

A z toho můžete spočítat další věci, třeba názvy spojené do jednoho textu pomocí map() a join().