Reactieve bewerkingen op arrays van objecten in React

Laten we nu leren hoe we reactieve bewerkingen kunnen uitvoeren op arrays van objecten. In dit geval moeten we aan de functie id van het array-element doorgeven, waarmee we van plan zijn iets te doen:

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

Om iets met een element te doen, moeten we het eerst vinden door het hele array te doorlopen met een lus:

jsxfunction App() {
  ...
  
  function doSmth(id) {
    setNotes(notes.map(note => {
      if (note.id === id) {
        // doe iets met het element
      }
      
      return note;
    }));
  }
}

Laten we als voorbeeld de teksten van het gevonden object wijzigen:

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