Délégation de contenu

Il existe des composants qui ne connaissent pas leurs enfants à l'avance. On parle dans ce cas de composants génériques.

Pour ce type de composant, il faut utiliser la propriété spéciale de react, qui est children qui permet de passer directement les éléments enfants au composant.

Le composant nous permettant d'afficher la liste des cryptos est plutôt moche. Nous allons le rendre plus beau et afficher les images correspondantes pour chaque monnaie. Nous verrons comment utiliser la propriété children pour le faire.

Commençons par créer un nouveau composant que nous nommerons ImageBlock.jsx. Ce composant permettra d'afficher les images et d'ajouter des enfants.

const ImageBlock = ({ children, crypto }) => {
  return (
    <>
        <img src={crypto.link} alt={crypto.currency_long}/>
        {children}
    </>
  );
};
export default ImageBlock;

Vous avez remarqué le nouveau code <>...</> , il s'agit d'un composant react qu'on appelle Fragment. Vous pouvez aussi écrire, <React.Fragment>...</React.Fragment> . Les fragments nous permettent de grouper une liste d’enfants sans ajouter de nœud supplémentaire au DOM. Dans le cas où vous avez besoin d'utiliser un tableau, il est préférable d'utiliser <React.Fragment> car il accepte la valeur key.

Modifions à présent notre fichier Crypto.jsx pour utiliser notre composant générique ImageBlock.jsx. Ne pas oublier de donner une valeur à Key pour aider React à identifier chaque ligne individuellement.

import ImageBlock from "./ImageBlock";
import useGetImages from "./useGetImages";

const Crypto = ({searchValue}) => {
 const [status, cryptos] = useGetImages(searchValue)
  return (
    <div className="ListImageContainer">
      {status!== "loaded" && <div>Chargement....</div>}
      {status === "loaded" && cryptos.map((crypto) => (
        <div key={crypto.currency_long} className="imageWrapper">
          <ImageBlock crypto={crypto}>
            <div style={{ fontWeight: "500" }}>
              {crypto.currency_long}
            </div>
          </ImageBlock>
        </div>
      ))}
    </div>
  );
};
export default Crypto;

Accéder au fichier du projet pour cette étape

Sélectionner un fichier