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