Operações reativas com arrays em React

Agora vamos aprender a fazer manipulações reativas com elementos de um array. Para isso, vamos adicionar um manipulador de evento a cada li, no qual passaremos como parâmetro o índice deste li no 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 da nossa função, podemos realizar qualquer operação no nosso elemento do array:

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

Dado um array com números. Exiba-o como uma lista ul. Ao clicar em qualquer li, eleve o seu número ao quadrado.

No final de cada li, adicione um botão, ao clicar no qual esta li será removida da lista.

Dado um input. Ao clicar em qualquer li, faça com que o texto desta li seja colocado no input.

Modifique a tarefa anterior para que, ao perder o foco do input, o texto alterado seja colocado na respectiva li.

Dado um botão. Ao clicar neste botão, inverta a ordem das li para a ordem reversa.