Реактивно додавање во низа од објекти во 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>;
}