تحديث عنصر داخل المصفوفة بإستخدام map

ال map بتسمح تستبدل العنصر المطلوب وتحتفظ بباقي العناصر

المثال داخل مشروع React يدعم JSX و Hooks

تطبيق الفكرة

بننشئ كائن جديد للعنصر المتغير فقط

ملف App.jsx

import { useState } from "react";
export default function App() {
  const [tasks, setTasks] = useState([{ id: 1, done: false }]);
  function complete() {
    setTasks(previous => previous.map(task => task.id === 1 ? { ...task, done: true } : task));
  }
  return <><p>{tasks[0].done ? "Done" : "Pending"}</p><button onClick={complete}>Complete</button></>;
}

النتيجة

الحالة بتتغير من Pending إلى Done