Reaktive Array-Operationen in React

Lassen Sie uns nun lernen, wie man reaktive Manipulationen mit Array-Elementen durchführt. Dazu werden wir für jedes li einen Event-Handler setzen, in dem wir die Position dieses li im Array als Parameter übergeben:

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

Innerhalb unserer Funktion können wir eine beliebige Operation mit unserem Array-Element durchführen:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // mache etwas mit dem Element
		setNotes(copy);
	}
}

Gegeben ist ein Array mit Zahlen. Geben Sie es in Form einer ul-Liste aus. Bei einem Klick auf ein beliebiges li quadrieren Sie die entsprechende Zahl.

Erstellen Sie am Ende jedes li eine Schaltfläche, bei deren Betätigung dieses li aus der Liste entfernt wird.

Gegeben ist eine Eingabe. Bei einem Klick auf ein beliebiges li sorgen Sie dafür, dass der Text dieses li in die Eingabe übernommen wird.

Modifizieren Sie die vorherige Aufgabe so, dass bei Verlassen des Fokus der Eingabe der geänderte Text in das entsprechende li übernommen wird.

Gegeben ist eine Schaltfläche. Bei einem Klick auf diese Schaltfläche kehren Sie die Reihenfolge der li-Elemente um.