Instruções

Passo 34

FootballPlayerCard atualmente renderiza o card com um defaultPlayer fixo. Para tornar o app interativo, você precisa gerenciar os dados do jogador no estado do React para que atualizações possam disparar re-renderizações. Dentro do componente FootballPlayerCard, crie uma variável de estado chamada player com um setter setPlayer que irá armazenar os dados atuais do jogador. Inicialize esse estado com defaultPlayer e especifique que o estado usa o tipo PlayerData como genérico para que o TypeScript saiba qual forma o objeto jogador deve ter. Depois disso, atualize o retorno para passar a variável de estado player como prop para PlayerCard.

O que fazer:

Testes:

  • Você deve usar desestruturação de array para definir uma variável de estado `player` e um setter `setPlayer`.
  • Seu `player` e `setPlayer` devem usar o hook `useState`.
  • Seu `useState` deve ser inicializado com `defaultPlayer` e ter `PlayerData` como seu tipo genérico.
  • Você deve ter `player` como valor da prop `player` passada para `PlayerCard`.

Preview