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 libellés, une seule définition. Chaque liste, menu, flux et galerie que vous avez déjà vus sur le Web suivent 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 libellé New, puis le second avec le libellé 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>