Operacione Reaktive mbi Vargjet në React

Tani le të mësojmë të kryejmë manipulime reaktive me elementët e vargut. Për këtë, ne do të vendosim një përgjegjës ngjarjeje për çdo li ku do të kalojmë si parametër indeksin e kësaj li në varg:

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

Brenda funksionit tonë mund të kryejmë çdo operacion me elementin tonë të vargut:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // bëj diçka me elementin
    setNotes(copy);
  }
}

Задание 1

Jepet një varg me numra. Shfaqeni atë në formën e një liste ul. Me klikim në çdo li ngritni numrin e saj në katror.

Задание 2

Në fund të çdo li bëni një buton, me shtypje të së cilës kjo li do të fshihet nga lista.

Задание 3

Jepet një input. Me klikim në çdo li bëni që teksti i kësaj li të shfaqet në input.

Задание 4

Modifikoni detyrën e mëparshme ashtu që, në humbjen e fokusit të input, teksti i modifikuar të shfaqet në li përkatëse.

Задание 5

Jepet një buton. Me klikim në këtë buton kthejeni rendin e li në të kundërt.