المكون نفسه، بيانات جديدة

ضع إعادة الاستخدام والـ props معًا وستحصل على النمط الحقيقي: مكوّن واحد، يتم عمل render له عدة مرات ببيانات مختلفة.

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

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

ثلاثة badge، وثلاثة label، وتعريف واحد. كل قائمة، وقائمة طعام، وخلاصة، ومعرض شاهدته على الويب هو هذا النمط (لاحقًا سنقوم حتى بتوليد النسخ من مصفوفة).