Thao tác phản ứng trên mảng trong React

Bây giờ hãy học cách thực hiện các thao tác phản ứng với các phần tử mảng. Để làm điều này, chúng ta sẽ đính kèm một trình xử lý sự kiện vào mỗi li, trong đó chúng ta sẽ truyền số thứ tự của li đó trong mảng dưới dạng tham số:

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>;
}

Bên trong hàm của chúng ta, chúng ta có thể thực hiện bất kỳ thao tác nào trên phần tử mảng của mình:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // làm gì đó với phần tử
    setNotes(copy);
  }
}