شرح صفوف ومحتوى الفقرة
كلما زادت تفاصيل العنصر الواحد من صور وشارات وبيانات فرعية، افصل بنيته في مكون فرعي مستقل مثل <WorkshopCard />. وتذكر القاعدة الذهبية دائماً؛ وهي وضع خاصية key مباشرة على استدعاء <WorkshopCard key={w.id} /> داخل حلقة map() وليس على الوسم الداخلي داخل ملف المكون الابن.
HTML
function WorkshopItem({ title, hours }) {
return <li>{title} ({hours}h)</li>;
}
function WorkshopList({ list }) {
return (
<ul>
{list.map((w) => (
<WorkshopItem key={w.id} {...w} />
))}
</ul>
);
}