3.4. Correction : Créer un état pour gérer nos Pokémons

Alors vous avez réussi ? Vous n’avez plus d’erreurs dans la console ? 😉

Je vous propose tout de même une correction, afin que nous ayons la même base pour la suite. Récupérez donc le nouveau code du fichier App.tsx ci-dessous, puis analysons le ensemble :

import React, { FunctionComponent, useState } from 'react';
import Pokemon from './models/pokemon';
import POKEMONS from './models/mock-pokemons';

const App: FunctionComponent = () => {
 const [pokemons] = useState<Pokemon[]>(POKEMONS); // Nous n'avons pas besoin de setPokemons pour le moment.

 return (
  <div>
   <h1>Pokédex</h1>
   <p>Il y a {pokemons.length} pokémons dans le Pokédex.</p>
  </div>
  );
}

export default App;

Voici ce qui a été modifié, par rapport au composant qui affichait simplement « Hello, World ! » :

• Trois importations: importation du Hook useState, récupération du modèle représentant un Pokémon (afin de pouvoir typer nos variables), et ajout de la constante POKEMONS, qui contient les données de différents Pokémons.
• Déclaration du state à la ligne 4 : pokemons contient l’état initial de notre composant. On a typé les données de notre state en indiquant qu’il devait contenir un tableau de pokémons, avec la syntaxe Pokemon[]. De plus, on a initialisé notre state avec la constante POKEMONS. Bien sûr, on a fait tout cela en une seule ligne. Merci à React et aux Hooks ! 👍
• Modification du template JSX à la ligne 11, pour afficher le nombre de pokémons présent dans notre state. Il s’agit d’une simple expression JavaScript à l’intérieur de code JSX.

Si vous avez pu réaliser ce code par vous-même c’est excellent ! Et si vous avez au moins compris la correction, alors c’est déjà très bien.

Nous voici avec un composant presque prêt, mais il lui manque encore une chose pour pouvoir fonctionner correctement. Dans une « vraie » application, nous n’aurons pas la liste de pokémons directement disponible. Il faudra attendre l’initialisation du composant, pour faire une requête au backend et récupérer les données nécessaires. C’est pourquoi nous devons encore ajouter la gestion du cycle de vie à ce composant.