Aynı Bileşen, Yeni Veri

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 19 / 42.

Yeniden kullanımı ve props'u bir araya getirdiğinizde gerçek kalıbı elde edersiniz: tek bir bileşen, farklı verilerle defalarca render edilir.

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

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

Üç `badge`, üç `label`, tek bir tanım. Web'de gördüğünüz her liste, menü, akış ve galeri bu kalıptan ibarettir (daha sonra kopyaları bir diziden bile oluşturacağız).

Görev

Kolay

Mağazanın promosyon rozetlerini gönderin.

Badge bileşeninin bir label prop'u almasını ve bunu kendi <span> etiketi içinde işlemesini sağlayın.
<div id="badges"> içinde iki rozet işleyin: ilki New etiketine, ikincisi ise Sale etiketine sahip olsun.

Kendin dene

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