Реактивни операции над масиви в React

Нека сега се научим да правим реактивни манипулации с елементи на масив. За това на всеки li ще добавим манипулатор на събитие, в който като параметър ще подаваме номера на този li в масива:

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

Във функцията ни можем да извършим всякаква операция с нашия елемент на масива:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // направим нещо с елемента
    setNotes(copy);
  }
}

Задание 1

Даден е масив с числа. Изведете го като списък ul. При клик върху който и да е li повдигнете нейното число на квадрат.

Задание 2

В края на всеки li направете бутон, при натискане на който този li ще бъде изтрит от списъка.

Задание 3

Даден е input. При клик върху който и да е li направете така, че текстът от този li да попадне в input.

Задание 4

Модифицирайте предходната задача така, че при загуба на фокус на input промененият текст да попадне в съответния li.

Задание 5

Даден е бутон. При клик на този бутон обърнете реда на li на обратен.