Reaktivne operacije nad tabelami v Reactu

Zdaj se naučimo delati reaktivne manipulacije z elementi tabele. Za to bomo na vsak li dodali obravnavalnik dogodka, ki mu bomo kot parameter podali številko tega li v tabeli:

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

Znotraj naše funkcije lahko izvedemo katero koli operacijo nad našim elementom tabele:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // naredimo nekaj z elementom
		setNotes(copy);
	}
}

Podana je tabela s števili. Prikažite jo kot seznam ul. Ob kliku na kateri koli li dvignite njeno število na kvadrat.

Na koncu vsakega li naredite gumb, ob pritisku na katerega bo ta li izbrisan iz seznama.

Podan je vnos. Ob kliku na kateri koli li naredite tako, da besedilo tega li pride v vnos.

Spremenite prejšnjo nalogo tako, da ob izgubi fokusa vnosa spremenjeno besedilo pride v ustrezen li.

Podan je gumb. Ob kliku na ta gumb obrnite vrstni red li v obraten.