Αντίδραση Προσθήκης σε Πίνακα Αντικειμένων στο React

Ας μελετήσουμε τώρα την αντίδραση πίνακα αντικειμένων. Σε αυτήν την περίπτωση πρέπει να κάνουμε οποιεσδήποτε αλλαγές, προσπελαύνοντας τα στοιχεία μέσω id, τα οποία αποθηκεύονται μέσα στα ίδια τα αντικείμενα.

Ας δοκιμάσουμε. Ας υποθέσουμε ότι έχουμε τον ακόλουθο πίνακα αντικειμένων:

jsxconst initNotes = [
  {
    id: 'GYi9G_uC4gBF1e2SixDvu',
    prop1: 'value11',
    prop2: 'value12',
    prop3: 'value13',
  },
  {
    id: 'IWSpfBPSV3SXgRF87uO74',
    prop1: 'value21',
    prop2: 'value22',
    prop3: 'value23',
  },
  {
    id: 'JAmjRlfQT8rLTm5tG2m1L',
    prop1: 'value31',
    prop2: 'value32',
    prop3: 'value33',
  },
];

Ας εμφανίσουμε κάθε στοιχείο του πίνακα μας σε ξεχωριστή ετικέτα li:

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>
    </li>;
  });
  
  return <div>
    <ul>
      {result}
    </ul>
  </div>;
}