Operaciones reactivas con arrays en React

Ahora aprendamos a realizar manipulaciones reactivas con elementos de un array. Para ello, agregaremos un controlador de eventos a cada li que pasará como parámetro el índice de este li en el 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>;
}

Dentro de nuestra función podemos realizar cualquier operación con nuestro elemento del array:

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

Se da un array con números. Muéstralo como una lista ul. Al hacer clic en cualquier li, eleva su número al cuadrado.

Al final de cada li agrega un botón, que al presionarlo elimine esta li de la lista.

Se da un input. Al hacer clic en cualquier li haz que el texto de esta li aparezca en el input.

Modifica la tarea anterior para que al perder el foco del input, el texto modificado se actualice en la li correspondiente.

Se da un botón. Al hacer clic en este botón invierte el orden de las li al revés.