Reaktívne operácie nad poliami v React

Poďme sa teraz naučiť robiť reaktívne manipulácie s prvkami poľa. Na to na každú li pridáme obsluhu udalosti, v ktorej parametrom budeme odovzdávať číslo tejto li v poli:

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

Vo vnútri našej funkcie môžeme vykonať akúkoľvek operáciu s našim prvkom pola:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // niečo urobíme s prvkom
		setNotes(copy);
	}
}

Dané pole s číslami. Zobrazte ho ako zoznam ul. Po kliknutí na ľubovoľnú li umocnite jej číslo na druhú.

Na konci každej li vytvorte tlačidlo, po stlačení ktorého sa táto li odstráni zo zoznamu.

Daný input. Po kliknutí na ľubovoľnú li urobte tak, aby text tejto li sa dostal do inputu.

Upravte predchádzajúcu úlohu tak, aby po strate focusu inputu sa zmenený text dostal do príslušnej li.

Dané tlačidlo. Po kliknutí na toto tlačidlo obráťte poradie li na opačné.