Reaktywne operacje na tablicach w React

Nauczmy się teraz wykonywać reaktywne manipulacje na elementach tablicy. Dla tego na każdy li zawiesimy procedurę obsługi zdarzenia, w której parametrem będziemy przekazywać numer tego li w tablicy:

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

Wewnątrz naszej funkcji możemy wykonać dowolną operację na naszym elemencie tablicy:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // coś zrobimy z elementem
		setNotes(copy);
	}
}

Dana jest tablica z liczbami. Wyświetl ją w postaci listy ul. Po kliknięciu na dowolny li podnieś jej liczbę do kwadratu.

Na końcu każdego li zrób przycisk, po naciśnięciu którego ten li będzie usuwany z listy.

Dany jest input. Po kliknięciu na dowolny li spraw, aby tekst tego li trafił do inputa.

Zmodyfikuj poprzednie zadanie tak, aby po utracie fokusu inputa zmieniony tekst trafiał do odpowiedniego li.

Dany jest przycisk. Po kliknięciu na ten przycisk odwróć kolejność li na przeciwną.