Same Component, New Data

Part of the Fundamentals section of Coddy's React journey — lesson 19 of 42.

Put reuse and props together and you get the real pattern: one component, rendered many times with different data.

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

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

Three badges, three labels, one definition. Every list, menu, feed and gallery you've ever seen on the web is this pattern (later we'll even generate the copies from an array).

Challenge

Easy

Ship the shop's promo badges.

Make Badge receive a label prop and render it inside its <span>.
Inside <div id="badges"> render two badges: first with label New, then with label Sale.

Try it yourself

<!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>