Реактивӣ амалҳо бар рӯи массивҳои объектҳо дар React

Биёед ҳоло биомӯзем, ки чӣ гуна амалҳои реактивӣ бар рӯи массивҳои объектҳо анҷом диҳем. Дар ин ҳолат мо бояд ба функсияи id унсури массивро, ки мо мехоҳем чизе бо он анҷом диҳем, гузаронем:

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

Барои он ки чизеро бо унсур анҷом диҳем, мо аввал бояд онро ёфта, тамоми массивро бо давр такрор кунем:

jsxfunction App() {
  ...
  
  function doSmth(id) {
    setNotes(notes.map(note => {
      if (note.id === id) {
        // чизе бо унсур анҷом медиҳем
      }
      
      return note;
    }));
  }
}

Барои мисол, биёед матнҳои объекти ёфташударо тағир диҳем:

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