تبديل وتحديث عنصر بدالة map | تحديث المصفوفات في الحالة بطرق غير مغيرة

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

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

لتعديل عنصر واحد أو تبديل حالة إنجاز مهمة داخل مصفوفة كائنات، استخدم الدالة map()؛ فعندما يتطابق item.id === targetId نعيد كائناً منسوخاً جديداً { ...item, done: !item.done }، ونعيد بقية العناصر كما هي دون تعديل.

الصف 2 كود برمجي

HTML

import { useState } from 'react';
function TaskChecklist() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Write SVG', done: false },
  ]);
  const flip = (id) =>
    setTasks(tasks.map((t) =>
      t.id === id ? { ...t, done: !t.done } : t
    ));
  return <button onClick={() => flip(1)}>Done</button>;
}

جرّب بنفسك

الصف 3 ملاحظة هامة

Updating Array Items with map تبديل وتحديث عنصر بدالة map

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

جميع فقرات هذا الدرس (تحديث المصفوفات في الحالة بطرق غير مغيرة)