Reactieve arraybewerkingen in React

Laten we nu leren hoe we reactieve manipulaties met array-elementen kunnen doen. Hiervoor voegen we aan elke li een event handler toe, waarin we als parameter het nummer van deze li in de array doorgeven:

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

Binnen onze functie kunnen we elke bewerking uitvoeren op ons array-element:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // doe iets met het element
		setNotes(copy);
	}
}

Gegeven een array met nummers. Geef deze weer als een lijst ul. Bij klik op een willekeurige li verhef het getal in het kwadraat.

Maak aan het einde van elke li een knop, waarbij bij het indrukken deze li wordt verwijderd uit de lijst.

Gegeven een invoerveld. Bij klik op een willekeurige li zorg ervoor dat de tekst van deze li in het invoerveld komt.

Wijzig de vorige opdracht zo, dat bij het verliezen van focus van het invoerveld de gewijzigde tekst in de bijbehorende li komt.

Gegeven een knop. Bij klik op deze knop keer je de volgorde van li om.