Reaktive operasjoner på arrays i React

La oss nå lære å utføre reaktive manipulasjoner med elementer i et array. For dette vil vi på hver li legge en event handler, der vi som parameter vil sende indeksen til denne li i arrayet:

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

Inne i funksjonen vår kan vi utføre enhver operasjon på vårt arrayelement:

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

Gitt et array med tall. Vis det som en liste ul. Ved klikk på en hvilken som helst li, opphøy tallet i andre.

På slutten av hver li, lag en knapp, ved trykk på denne vil li bli fjernet fra listen.

Gitt et inputfelt. Ved klikk på en hvilken som helst li, gjør slik at teksten til denne li kommer inn i inputfeltet.

Modifiser forrige oppgave slik at ved tap av fokus på inputfeltet, skal den endrede teksten komme inn i den tilsvarende li.

Gitt en knapp. Ved klikk på denne knappen reverser rekkefølgen på li til omvendt.