Реактивӣ донидани массив аз объектҳо дар 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>;
}