انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: عرض القوائم وتصفيتها باستخدام map وfilter

Filtering Items with filter تصفية العناصر بدالة filter

حوّل مصفوفات البيانات في JavaScript إلى قوائم مكونات React ديناميكية باستخدام دالتي map وfilter، وافصل مكون العنصر المفرد، وصمّم واجهة بديلة للقوائم الفارغة.
3 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عندما ترغب في عرض السجلات المحققة لشرط محدد فقط، كالمنتجات المتوفرة بالمخزون أو الدورات المنشورة، استدعِ دالة filter() أولاً لاستخلاص مصفوفة فرعية مطابقة، ثم أردفها بدالة map() لتحويل تلك السجلات إلى عناصر عرض.

الصف 2 كود برمجي
HTML 
function InStockCatalog({ items }) {
  const ready = items.filter((i) => i.inStock);
  return (
    <div className="rx-stack">
      {ready.map((i) => (
        <div key={i.id}>{i.name} — ${i.price}</div>
      ))}
    </div>
  );
}
جرّب بنفسك
الصف 3 ملاحظة هامة

جميع فقرات هذا الدرس (عرض القوائم وتصفيتها باستخدام map وfilter)