Même composant, nouvelles données

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 19 sur 42.

Associez la réutilisation et les props, et vous obtenez le véritable modèle : un seul composant, rendu plusieurs fois avec des données différentes.

function Badge({ label }) {
    return <span>{label}</span>;
}

<Badge label="New" />
<Badge label="Sale" />
<Badge label="Hot" />

Trois badges, trois labels, une définition. Chaque liste, menu, flux et galerie que vous avez déjà vus sur le web suit ce modèle (plus tard, nous générerons même les copies à partir d'un tableau).

Défi

Facile

Livrez les badges promotionnels de la boutique.

Faites en sorte que Badge reçoive une prop label et l'affiche à l'intérieur de son <span>.
À l'intérieur de <div id="badges">, affichez deux badges : le premier avec le label New, puis le second avec le label Sale.

Essayez vous-même

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>