Reaktiva operationer på arrayer i React

Låt oss nu lära oss att göra reaktiva manipulationer med arrayelement. För detta kommer vi att lägga en händelsehanterare på varje li där vi som parameter skickar index för denna li i arrayen:

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

Inuti vår funktion kan vi utföra vilken operation som helst med vårt arrayelement:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // gör något med elementet
    setNotes(copy);
  }
}

Задание 1

Given en array med siffror. Visa den som en lista ul. Vid klick på vilken li som helst, upphöj dess siffra i kvadrat.

Задание 2

Gör en knapp i slutet av varje li, vid klick på vilken denna li kommer att raderas från listan.

Задание 3

Given en input. Vid klick på vilken li som helst, gör så att texten från denna li hamnar i inputfältet.

Задание 4

Modifiera föregående uppgift så att när inputfältet förlorar fokus, ska den ändrade texten hamna i motsvarande li.

Задание 5

Given en knapp. Vid klick på denna knapp vänd ordningen på li till omvänd.