Operațiuni reactive pe array-uri în React

Să învățăm acum să facem manipulări reactive cu elementele unui array. Pentru aceasta, vom atașa fiecărui li un manager de evenimente, în care vom transmite ca parametru indexul acestui li în 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>;
}

În interiorul funcției noastre putem efectua orice operațiune asupra elementului nostru de array:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // facem ceva cu elementul
    setNotes(copy);
  }
}

Задание 1

Este dat un array cu numere. Afișați-l sub forma unei liste ul. La click pe orice li ridicați numărul ei la pătrat.

Задание 2

La sfârșitul fiecărei li faceți un buton, la apăsarea căruia această li va fi ștearsă din listă.

Задание 3

Este dat un input. La click pe orice li faceți astfel încât textul acestei li să ajungă în input.

Задание 4

Modificați problema anterioară astfel încât la pierderea focusului input-ului, textul modificat să ajungă în li corespunzătoare.

Задание 5

Este dat un buton. La click pe acest buton inversați ordinea li în sens opus.