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:

const 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:

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

Tạo một nút bấm, khi nhấn vào nó một phần tử mới sẽ được thêm vào cuối mảng, qua đó thêm một li mới vào cuối thẻ ul.

Tạo ba ô nhập liệu và một nút bấm. Khi nhấn vào nút bấm, hãy tạo một li mới ở cuối thẻ ul từ dữ liệu trong ô nhập liệu.