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

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

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

Cho một mảng số. Hiển thị nó dưới dạng danh sách ul. Khi nhấp vào bất kỳ li nào, hãy bình phương số của nó.

Ở cuối mỗi li, hãy tạo một nút, khi nhấn vào nút đó thì li đó sẽ bị xóa khỏi danh sách.

Cho một ô nhập liệu (input). Khi nhấp vào bất kỳ li nào, hãy làm sao để văn bản của li đó được đưa vào ô nhập liệu.

Chỉnh sửa bài tập trước sao cho khi mất tiêu điểm (blur) khỏi ô nhập liệu, văn bản đã thay đổi sẽ được đưa vào li tương ứng.

Cho một nút bấm. Khi nhấp vào nút này, hãy đảo ngược thứ tự của các li.