Shtimi reaktiv në një grup objektesh në React

Tani le të studiojmë reaktivitetin e një grupi objektesh. Në këtë rast, ne duhet të kryejmë çdo ndryshim, duke iu drejtuar elementeve përmes id, të cilat ruhen brenda vetë objekteve.

Le të provojmë. Le të themi se kemi grupin e mëposhtëm të objekteve:

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',
  },
];

Le të shfaqim secilin element të grupit tonë në një etiketë të veçantë 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>;
}