Các thao tác phản ứng trên mảng đối tượng trong React

Bây giờ hãy học cách thực hiện các thao tác phản ứng trên mảng đối tượng. Trong trường hợp này, chúng ta phải truyền vào hàm id của phần tử mảng mà chúng ta định làm gì đó:

jsxfunction App() {
  const [notes, setNotes] = useState(initNotes);
  
  const result = notes.map(note => {
    return <li key={note.id}>
      <span>{note.prop1}</span>
      <span>{note.prop2}</span>
      <span>{note.prop3}</span>
      
      <button onClick={() => doSmth(note.id)}>
        btn
      </button>
    </li>;
  });
  
  return <div>
    <ul>
      {result}
    </ul>
  </div>;
}

Để làm gì đó với một phần tử, trước tiên chúng ta phải tìm nó bằng cách lặp qua toàn bộ mảng:

jsxfunction App() {
  ...
  
  function doSmth(id) {
    setNotes(notes.map(note => {
      if (note.id === id) {
        // làm gì đó với phần tử
      }
      
      return note;
    }));
  }
}

Hãy thay đổi văn bản của đối tượng được tìm thấy làm ví dụ:

jsxfunction App() {
  ...
  
  function doSmth(id) {
    setNotes(notes.map(note => {
      if (note.id === id) {
        note.prop1 += '!';
        note.prop2 += '!';
        note.prop3 += '!';
        
        return note;
      }
      
      return note;
    }));
  }
}