شرح صفوف ومحتوى الفقرة
فور استلام مصفوفة الكائنات من الخادم، حوّل كل سجل إلى عناصر واجهة دلالية واضحة مع إسناد المعرّف الفريد القادم من قاعدة البيانات إلى خاصية المفتاح key={product.id}، وتجنب الاعتماد على فهرس المصفوفة الرقمي في القوائم القابلة للتصفية أو التحديث.
نسّق القيم الخام أثناء العرض مثل تحويل الأرقام إلى أسعار مقروءة والقيم المنطقية إلى شارات توفر واضحة، بحيث لا تطبع القيم البرمجية المجردة مباشرة للمستخدم.
HTML
{products.map((item) => (
<article key={item.id} className="rx-row">
<strong>{item.name}</strong>
<span>${item.price}</span>
<span>{item.inStock ? 'In Stock' : 'Out'}</span>
</article>
))}