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>