التصفية ثم التعيين (Filter, Then Map)
جزء من قسم الأساسيات في رحلة React على Coddy — الدرس 37 من 42.
تتسلسل أساليب المصفوفات (Array methods)، واستخدام filter قبل map يقوم بعمل render للعناصر التي تريدها فقط:
const numbers = [1, 2, 3, 4, 5, 6];
{numbers
.filter((n) => n % 2 === 0)
.map((n) => <li key={n}>{n}</li>)}
// يعرض: 2, 4, 6يقوم filter بالاحتفاظ بالعناصر التي يتحقق فيها الشرط؛ بينما يقوم map بتحويل العناصر المتبقية إلى عناصر أخرى. نتائج البحث، الرسائل غير المقروءة، المهام المكتملة. كل ميزة "عرض فقط..." على الويب تعتمد على هذه السلسلة.
التحدي
متوسطإظهار المنتجات ذات الأسعار المعقولة في المتجر فقط.
- داخل
<ul id="cheap-list">، قم بعمل render لـ<li>واحدة لكل سعر في المصفوفة يكون أقل من 10: استخدم filter أولاً، ثم map. - كل
<li>تعرِض السعر وتستخدمه كـ key.
جرّب بنفسك
<!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>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس الأساسيات
4الـ Props
ما هي الـ Props؟تمرين تمرير الـ Propsخاصيتان (Two Props)المكون نفسه، بيانات جديدةخاصية Children Propملخص: الـ Props7الشروط والمصفوفات
العرض الشرطي الثلاثي (Ternary Rendering)العرض باستخدام &&عرض قائمةأهمية المفاتيح (Keys)التصفية ثم التعيين (Filter, Then Map)ملخص: الشروط والمصفوفات2تعبيرات JSX
الأقواس المعقوفةالعمليات الرياضية داخل الأقواسالأقواس في السماتاستدعاء الدوال في JSXملخص: تعبيرات JSX5الحالة والأحداث
ما هي الحالة (State)؟عداد النقراتالعد بخطواتالتبديل باستخدام الحالةحالة مستقلةملخص: الحالة والأحداث8مشروع: بطاقة الملف الشخصي
الخطوة 1: هيكل البطاقةالخطوة 2: بطاقة مع Propsالخطوة 3: زر الإعجابالخطوة 4: تبديل المتابعة