Реактивни операции над низи во 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 на обратен.