Operasi Reaktif pada Array di React

Sekarang mari kita belajar melakukan manipulasi reaktif dengan elemen array. Untuk melakukan ini, kita akan menambahkan penangan acara pada setiap li, di mana kita akan meneruskan nomor li tersebut dalam array sebagai 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>;
}

Di dalam fungsi kita, kita dapat melakukan operasi apa pun pada elemen array kita:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // lakukan sesuatu dengan elemen
    setNotes(copy);
  }
}

Задание 1

Diberikan array dengan angka. Tampilkan array tersebut dalam bentuk daftar ul. Saat diklik pada li mana pun, pangkatkan angka nya menjadi kuadrat.

Задание 2

Di akhir setiap li, buat tombol, yang ketika ditekan, li tersebut akan terhapus dari daftar.

Задание 3

Diberikan sebuah input. Saat diklik pada li mana pun, buat agar teks dari li tersebut masuk ke dalam input.

Задание 4

Modifikasi tugas sebelumnya sehingga saat input kehilangan fokus, teks yang diubah masuk ke dalam li yang sesuai.

Задание 5

Diberikan sebuah tombol. Saat diklik tombol tersebut, balik urutan li menjadi terbalik.