Operacione Reaktive mbi Vargje të Objekteve në React

Tani le të mësojmë si të kryejmë operacione reaktive mbi vargje objektesh. Në këtë rast, ne duhet t'i kalojmë funksionit id të elementit të vargut me të cilin po synojmë të bëjmë diçka:

jsxfunction App() {
  const [notes, setNotes] = useState(initNotes);
  
  const result = notes.map(note => {
    return <li key={note.id}>
      <span>{note.prop1}</span>
      <span>{note.prop2}</span>
      <span>{note.prop3}</span>
      
      <button onClick={() => doSmth(note.id)}>
        btn
      </button>
    </li>;
  });
  
  return <div>
    <ul>
      {result}
    </ul>
  </div>;
}

Për të bërë diçka me një element, së pari duhet ta gjejmë atë, duke kaluar nëpër të gjithë vargun me një cikël:

jsxfunction App() {
  ...
  
  function doSmth(id) {
    setNotes(notes.map(note => {
      if (note.id === id) {
        // bëj diçka me elementin
      }
      
      return note;
    }));
  }
}

Le të ndryshojmë tekstet e objektit të gjetur për shembull:

jsxfunction App() {
  ...
  
  function doSmth(id) {
    setNotes(notes.map(note => {
      if (note.id === id) {
        note.prop1 += '!';
        note.prop2 += '!';
        note.prop3 += '!';
        
        return note;
      }
      
      return note;
    }));
  }
}