Kódím.cz
5

Zastaralé hodnoty

Nahlédneme pod pokličku principům, kvůli kterýn naše React komponenty často fungují podivně a nečekaně.

4
Datluj.cz, fáze 4

Přidáme možnost zobrazovat více slov najednou.

Pokud na obrazovce vidíme více slov, vždy píšeme první na seznamu. Takovému slovu říkáme, že je aktivní.

  1. Do komponenty Wordbox přidejte prop active, která říká, zda je komponenta zrovna aktivní. Uvnitř useEffectu přidávejte/odebírejte posluchač události keyup pouze v případě, že prop active má hodnotu true. Tím zaručíme, že klávesy bude poslouchat pouze aktivní komponenta.
  2. Přidejte prop active do seznamu závislostí pro useEffect, aby se při její změně efekt spustil.
  3. V komponentě Stage budeme nyní ve stavu udržovat pole tří slov. Zařiďte, aby pouze první slovo v seznamu mělu prop active nastaveno na true. Vždy chceme psát pouze první slovo.
  4. Ve funkci handleFinish nyní musíme odstranit slovo ze začátku seznamu a vygenerovat nové slovo na konec, abychom si udržovali pořád stejný počet zobrazených slov.
  5. Vyzkoušejte, že vaše aplikace správně funguje.