Reaktivne operacije nad nizovima u React

Sada naučimo da radimo reaktivne manipulacije sa elementima niza. Za ovo ćemo na svaku li dodati event handler, u koji ćemo kao parametar proslediti broj te li u nizu:

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

Unutar naše funkcije možemo izvršiti bilo koju operaciju nad našim elementom niza:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // uradimo nešto sa elementom
		setNotes(copy);
	}
}

Dat je niz sa brojevima. Ispišite ga u vidu liste ul. Klikom na bilo koju li podignite njen broj na kvadrat.

Na kraju svake li napravite dugme, čijim pritiskom će ta li biti uklonjena iz liste.

Dat je input. Klikom na bilo koju li napravite tako da tekst te li dođe u input.

Modifikujte prethodni zadatak tako, da pri gubitku fokusa inputa izmenjeni tekst dođe u odgovarajuću li.

Data je dugme. Klikom na ovo dugme okrenite redosled li na obrnut.