Reactive Array Operations in React

Let's now learn how to do reactive manipulations with array elements. To do this, we will attach an event handler to each li, in which we will pass the number of this li in the array as a parameter:

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

Inside our function we can perform any operation on our array element:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // let's do something with the element setNotes(copy);
  }
}

Задание 1

Given an array of numbers. Print it as a list ul. Click on any li to square its number.

Задание 2

At the end of each li make a button that, when clicked, will remove this li from the list.

Задание 3

Given an input. By clicking on any li, make the text of this li go into the input.

Задание 4

Modify the previous task so that when the input focus is lost, the modified text goes to the corresponding li.

Задание 5

A button is given. By clicking on this button, the order of li is reversed.