Operasi Reaktif pada Array di React

Sekarang mari kita belajar melakukan manipulasi reaktif dengan elemen array. Untuk melakukan ini, kita akan menambahkan penangan acara pada setiap li, di mana kita akan meneruskan nomor li tersebut dalam array sebagai parameter:

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

Di dalam fungsi kita, kita dapat melakukan operasi apa pun pada elemen array kita:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // lakukan sesuatu dengan elemen
		setNotes(copy);
	}
}

Diberikan array dengan angka. Tampilkan array tersebut dalam bentuk daftar ul. Saat diklik pada li mana pun, pangkatkan angka nya menjadi kuadrat.

Di akhir setiap li, buat tombol, yang ketika ditekan, li tersebut akan terhapus dari daftar.

Diberikan sebuah input. Saat diklik pada li mana pun, buat agar teks dari li tersebut masuk ke dalam input.

Modifikasi tugas sebelumnya sehingga saat input kehilangan fokus, teks yang diubah masuk ke dalam li yang sesuai.

Diberikan sebuah tombol. Saat diklik tombol tersebut, balik urutan li menjadi terbalik.