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:

jsxfunction 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:

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

Задание 1

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

Задание 2

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

Задание 3

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

Задание 4

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

Задание 5

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