2. Créer un composant avec des props

Afin de rentrer dans le concret, nous allons mettre en place un nouveau composant PokemonCard qui acceptera une seule prop. Cette prop sera un pokémon. Nous allons donc créer un nouveau dossier components, afin de placer notre composant src/components/pokemon-card.tsx à l’intérieur :

import React, { FunctionComponent } from 'react';

const PokemonCard: FunctionComponent = () => {
  
  return (
    <div>
      Ce composant est chargé d'afficher le pokémon : ?.
    </div>
  );
}

export default PokemonCard;

Voici donc un composant React de base, qui se contente de d’afficher « Ce composant est chargé d’afficher le pokémon : ?. » à nos utilisateurs.

Mais pourquoi diable placer ce composant dans un dossier « components », et non à la racine du projet comme App.tsx ?

Et bien, c’est du à la nature de nos différents composants, d’un point de vue fonctionnel. En fait, reprenons les 3 composants précédents que nous avions sur le schéma, et analysons le tout :

• App.tsx : C’est notre composant le plus haut de l’arborescence. Il devra seulement contenir les éléments communs à toute l’application (comme la barre de navigation par exemple). Nous allons donc devoir prochainement le modifier, car pour l’instant il s’occupe de tout dans l’application. Et ça, ce n’est pas bon pour la suite.
• PokemonsList: Nous n’avons pas encore créer ce composant. C’est le composant qui sera chargé d’afficher la liste de nos pokémons. Ce sera le composant parent du composant PokemonCard, et c’est lui qui devra passer chaque pokémon sous la forme d’une prop à ses composants fils.
• PokemonCard : C’est le composant fils, qui devra recevoir une prop en entrée pour fonctionner correctement. Il sera chargé d’afficher le pokémon correspondant à la prop qu’il aura reçue en entrée.

Donc si nous résumons, nous aurons notre composant App.tsx à la racine du projet (dans le dossier src), car il s’agit en quelque sorte du composant racine de notre application. Nous placerons ensuite le composant PokemonsList dans un dossier pages (nous ferons ça plus tard, ne vous inquiétez pas), car ce composant représente en fait une page complète dans notre application (la page qui affiche tous les pokémons). Enfin, le composant PokemonCard est placé dans le dossier components, car il s’agit d’un simple composant qui a une fonction très précise (afficher un pokémon), et qui peut être réutilisé où on le souhaite dans l’application.

Maintenant, passons aux choses sérieuses. Nous sommes ici pour voir comment passer des props à un composant. Et bien, voici comment faire pour passer une prop de pokémon dans le composant pokemon-card.tsx :

import React, { FunctionComponent } from 'react';

const PokemonCard: FunctionComponent = (pokemon) => {
  
  return (
    <div>
      Afficher le pokémon : {pokemon.name}
    </div>
  );
}

export default PokemonCard;

Comme vous pouvez le voir à la ligne 3, pour passer une prop à un composant, et bien on se contente de passer cette prop… en paramètre de la fonction qui représente notre composant. Et c’est tout !

Ensuite dans notre composant, à la ligne 7, nous affichons simplement le nom du pokémon que nous avons reçu via la prop un peu plus haut.

Alors, pour l’instant, nous n’avons pas appeler ce composant PokemonCard dans un composant parent, et donc nous ne pouvons pas vraiment lui passer la prop attendue. D’ailleurs, si vous jeter un coup d’oeil à votre application, rien n’auras changé. Et c’est normal, il nous reste encore à relier ce composant au reste de l’application. Encore un peu de patience donc ! 😉

Aussi, comme nous n’avons pas encore ajouté un type à notre propriété d’entrée pokemon, vous devriez avoir une petite erreur qui s’affiche dans votre éditeur de code :

En effet, comme peut-on être sûr que la variable pokemon dispose d’une propriété name ? Pour cela, nous allons devoir ajouter un type à pokemon, afin de garantir que cette variable dispose bien de la propriété name.