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