Khóa duy nhất trong mảng các thẻ trong React

Trong ví dụ trước, chúng ta tạo các đoạn văn của mình trong một vòng lặp, như thế này:

const res = arr.map(function(item) {
	return <p>{item}</p>;
});

Điều này sẽ hoạt động, tuy nhiên, nếu nhìn vào bảng điều khiển - chúng ta sẽ thấy lỗi: Warning: Each child in an array or iterator should have a unique "key" prop. Trong trường hợp này React yêu cầu rằng mỗi thẻ từ vòng lặp phải có một số định danh duy nhất, để React có thể làm việc với các thẻ này dễ dàng hơn sau này.

Số này được thêm vào bằng thuộc tính key. Trong trường hợp này, chúng ta có thể dùng chỉ mục của phần tử trong mảng làm số định danh. Trong trường hợp của chúng ta, chỉ mục này được lưu trong biến index và do đó dòng đã sửa sẽ trông như thế này:

const res = arr.map(function(item, index) {
	return <p key={index}>{item}</p>;
});

Hãy chạy thử - lỗi trong bảng điều khiển sẽ biến mất:

function App() {
	const arr = [1, 2, 3, 4, 5];
	
	const res = arr.map(function(item, index) {
		return <p key={index}>{item}</p>;
	});
	
	return <div>
		{res}
	</div>;
}

Một lần nữa: thuộc tính key này có ý nghĩa dịch vụ cho React, bạn sẽ hiểu sâu hơn về điểm này trong các bài học tiếp theo. Hiện tại chỉ cần biết: nếu bạn thấy lỗi như vậy - hãy thêm thuộc tính key với một giá trị duy nhất cho mỗi thẻ và vấn đề sẽ biến mất.

Khóa key chỉ cần là duy nhất trong phạm vi vòng lặp đó, trong một vòng lặp khác giá trị key có thể trùng với giá trị từ vòng lặp khác.

Hãy sửa đổi giải pháp của bạn từ bài tập trước theo như đã mô tả.