Reaktive operationer på arrays i React

Lad os nu lære at lave reaktive manipulationer med array-elementer. Til dette vil vi tilføje en event handler på hver li, som sender nummeret på denne li i arrayet som en parameter:

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

Inde i vores funktion kan vi udføre enhver operation på vores array-element:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // gør noget med elementet
		setNotes(copy);
	}
}

Der er givet et array med tal. Udskriv det som en liste ul. Ved klik på enhver li skal dens tal opløftes i anden potens.

Lav en knap i slutningen af hver li, ved tryk på hvilken denne li vil blive fjernet fra listen.

Der er givet et inputfelt. Ved klik på enhver li skal du gøre således, at teksten fra denne li kommer i inputfeltet.

Modificer den forrige opgave sådan, at ved tab af fokus på inputfeltet, skal den ændrede tekst komme ind i den tilsvarende li.

Der er givet en knap. Ved klik på denne knap skal du vende rækkefølgen af li om.