Reaktiva operationer på arrayer i React

Låt oss nu lära oss att göra reaktiva manipulationer med arrayelement. För detta kommer vi att lägga en händelsehanterare på varje li där vi som parameter skickar index för denna li i arrayen:

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

Inuti vår funktion kan vi utföra vilken operation som helst med vårt arrayelement:

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

Given en array med siffror. Visa den som en lista ul. Vid klick på vilken li som helst, upphöj dess siffra i kvadrat.

Gör en knapp i slutet av varje li, vid klick på vilken denna li kommer att raderas från listan.

Given en input. Vid klick på vilken li som helst, gör så att texten från denna li hamnar i inputfältet.

Modifiera föregående uppgift så att när inputfältet förlorar fokus, ska den ändrade texten hamna i motsvarande li.

Given en knapp. Vid klick på denna knapp vänd ordningen på li till omvänd.