Reaktivní operace s poli v Reactu

Nyní se naučme provádět reaktivní manipulace s prvky pole. K tomu přidáme na každý li obslužnou rutinu události, do které parametrem předáme index tohoto 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>;
}

Uvnitř naší funkce můžeme provést libovolnou operaci s naším prvkem pole:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // něco uděláme s prvkem
		setNotes(copy);
	}
}

Je dáno pole s čísly. Vypište jej jako seznam ul. Po kliknutí na libovolné li umocněte jeho číslo na druhou.

Na konci každého li vytvořte tlačítko, po jehož stisknutí se toto li odstraní ze seznamu.

Je dán input. Po kliknutí na libovolné li zařiďte, aby se text tohoto li dostal do inputu.

Upravte předchozí úlohu tak, aby po ztrátě fokusu inputu se změněný text dostal do příslušného li.

Je dáno tlačítko. Po kliknutí na toto tlačítko obracejte pořadí li na opačné.