Αντιδραστικές πράξεις σε πίνακες αντικειμένων στο 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.prop3 += '!';
        
        return note;
      }
      
      return note;
    }));
  }
}