القوائم والعرض الشرطي في React: map والمفتاح key وقائمة مهام

درس القوائم في React بالعربية: عرض المصفوفات بـ map، ولماذا تحتاج key، والعرض الشرطي بـ && والشرط الثلاثي، والتصفية، ثم بناء قائمة مهام كاملة تضيف وتحذف وتشطب.

Bashar Subh8 دقائقحُدّث 7 نوفمبر 2026

عرض قائمة بـ map

جرّب بنفسكReact 18 يعمل في متصفحك

اضغط «تشغيل» لترى النتيجة هنا.

لماذا key؟

key يساعد React على معرفة أي عنصر تغيّر أو حُذف. استخدم معرّفًا ثابتًا فريدًا مثل id، وتجنب رقم الترتيب index إذا كانت القائمة تتغير.

العرض الشرطي

جرّب بنفسكReact 18 يعمل في متصفحك

اضغط «تشغيل» لترى النتيجة هنا.

شرط ? أ : ب عندما يكون لديك خياران.
شرط && عنصر عندما تعرض شيئًا أو لا شيء.
احذر: {count && <p>...</p>} يعرض الرقم 0 إذا كان count صفرًا. اكتب count > 0 &&.

مشروع: قائمة مهام

جرّب بنفسكReact 18 يعمل في متصفحك

function App() {
  const [items, setItems] = useState([{ id: 1, text: 'تعلم React', done: false }]);
  const [text, setText] = useState('');
  const [show, setShow] = useState('all');

return (
    <main style={{ fontFamily: 'Tahoma', maxWidth: 380 }}>
      <h3>مهامي ({items.filter((i) => !i.done).length} متبقية)</h3>
      <form onSubmit={add} style={{ display: 'flex', gap: 6 }}>
        <input value={text} onChange={(e) => setText(e.target.value)} placeholder="مهمة جديدة" style={{ flex: 1 }} />
        <button>أضف</button>
      </form>
      <p>
        {['all', 'todo', 'done'].map((f) => (
          <button key={f} onClick={() => setShow(f)} disabled={show === f}>
            {{ all: 'الكل', todo: 'المتبقية', done: 'المنجزة' }[f]}
          </button>
        ))}
      </p>
      {visible.length === 0 && <p>لا توجد مهام هنا.</p>}
      <ul>
        {visible.map((i) => (
          <li key={i.id}>
            <span onClick={() => toggle(i.id)} style={{ cursor: 'pointer', textDecoration: i.done ? 'line-through' : 'none' }}>{i.text}</span>
            {' '}<button onClick={() => remove(i.id)} aria-label="حذف">✕</button>
          </li>
        ))}
      </ul>
    </main>
  );
}

render(<App />);

اضغط «تشغيل» لترى النتيجة هنا.

تمرين

أضف زر «حذف المنجزة» يزيل كل المهام المشطوبة.
اعرض عدد المهام المنجزة كنسبة مئوية.

المقالات

تعلّم

الأدوات

حل المشاكل

القوائم والعرض الشرطي في React: map والمفتاح key وقائمة مهام

عرض قائمة بـ map

لماذا key؟

العرض الشرطي

مشروع: قائمة مهام

تمرين