Operazioni reattive sugli array in React

Ora impariamo a eseguire manipolazioni reattive con gli elementi dell'array. Per fare questo, su ogni li aggiungeremo un gestore di eventi, in cui passeremo come parametro l'indice di questo li nell'array:

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

All'interno della nostra funzione possiamo eseguire qualsiasi operazione sul nostro elemento dell'array:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // facciamo qualcosa con l'elemento
		setNotes(copy);
	}
}

È dato un array di numeri. Visualizzatelo come una lista ul. Al click su qualsiasi li elevate il suo numero al quadrato.

Alla fine di ogni li create un pulsante, alla cui pressione questa li verrà rimossa dalla lista.

È dato un input. Al click su qualsiasi li fate in modo che il testo di questa li vada nell'input.

Modificate il task precedente in modo che alla perdita del focus dell'input il testo modificato vada nella corrispondente li.

È dato un pulsante. Al click su questo pulsante invertite l'ordine delle li al contrario.