Operațiuni reactive pe array-uri în React

Să învățăm acum să facem manipulări reactive cu elementele unui array. Pentru aceasta, vom atașa fiecărui li un manager de evenimente, în care vom transmite ca parametru indexul acestui li în array:

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

În interiorul funcției noastre putem efectua orice operațiune asupra elementului nostru de array:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // facem ceva cu elementul
		setNotes(copy);
	}
}

Este dat un array cu numere. Afișați-l sub forma unei liste ul. La click pe orice li ridicați numărul ei la pătrat.

La sfârșitul fiecărei li faceți un buton, la apăsarea căruia această li va fi ștearsă din listă.

Este dat un input. La click pe orice li faceți astfel încât textul acestei li să ajungă în input.

Modificați problema anterioară astfel încât la pierderea focusului input-ului, textul modificat să ajungă în li corespunzătoare.

Este dat un buton. La click pe acest buton inversați ordinea li în sens opus.