Tömbök reaktív műveletei Reactben

Most pedig tanuljuk meg, hogyan végezzünk reaktív műveleteket a tömb elemein. Ehhez minden egyes li elemre egy eseménykezelőt helyezünk, amely paraméterként továbbítja ennek a li-nek a sorszámát a tömbben:

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

A függvényünkön belül bármilyen műveletet végrehajthatunk a tömb elemein:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // csináljunk valamit az elemmel
		setNotes(copy);
	}
}

Adott egy számokból álló tömb. Jelenítse meg egy ul listában. Bármelyik li elemre kattintva emelje a négyzetre a benne lévő számot.

Minden li elem végén készítsen egy gombot, amelyre kattintva az a li törlődik a listából.

Adott egy input mező. Bármelyik li elemre kattintva tegye meg, hogy annak a li-nek a szövege belekerüljön az input mezőbe.

Módosítsa az előző feladatot úgy, hogy amikor az input mező elveszti a fókuszt, a módosított szöveg kerüljön a megfelelő li elembe.

Adott egy gomb. Erre a gombra kattintva fordítsa meg a li elemek sorrendjét.