Thêm đối tượng vào mảng một cách phản ứng trong React

Bây giờ chúng ta hãy tìm hiểu tính phản ứng của mảng đối tượng. Trong trường hợp này, chúng ta sẽ phải thực hiện mọi thay đổi bằng cách truy cập các phần tử thông qua id được lưu trữ bên trong chính các đối tượng.

Chúng ta hãy thử. Giả sử chúng ta có mảng đối tượng sau:

jsxconst initNotes = [
  {
    id: 'GYi9G_uC4gBF1e2SixDvu',
    prop1: 'value11',
    prop2: 'value12',
    prop3: 'value13',
  },
  {
    id: 'IWSpfBPSV3SXgRF87uO74',
    prop1: 'value21',
    prop2: 'value22',
    prop3: 'value23',
  },
  {
    id: 'JAmjRlfQT8rLTm5tG2m1L',
    prop1: 'value31',
    prop2: 'value32',
    prop3: 'value33',
  },
];

Hãy hiển thị từng phần tử của mảng chúng ta trong một thẻ li riêng biệt:

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>
    </li>;
  });
  
  return <div>
    <ul>
      {result}
    </ul>
  </div>;
}