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 :
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.