React-এ অ্যারে উপর প্রতিক্রিয়াশীল অপারেশন

এখন চলুন শিখি কিভাবে অ্যারের এলিমেন্টগুলির সাথে প্রতিক্রিয়াশীল ম্যানিপুলেশন করা যায়। এজন্য আমরা প্রতিটি li এর উপর একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করব, যার মধ্যে আমরা প্যারামিটার হিসেবে এই li এর ইনডেক্স অ্যারেতে পাস করব:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
  
  const result = notes.map((note, index) => {
    return <li key={index} onClick={() => doSmth(index)}>
      {note}
    </li>;
  });
  
  return <div>
    <ul>
      {result}
    </ul>
  </div>;
}

আমাদের ফাংশনের ভিতরে আমরা আমাদের অ্যারের এলিমেন্টের উপর যেকোনো অপারেশন সম্পাদন করতে পারি:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // এলিমেন্টের সাথে কিছু করব
    setNotes(copy);
  }
}