Reactda ob'ektlar massiviga reaktiv qo'shish

Keling, endi ob'ektlar massivining reaktivligini o'rganaylik. Bunday holda, biz har qanday o'zgartirishlarni amalga oshirishimiz kerak bo'ladi, ob'ektlar ichida saqlanadigan id orqali elementlarga murojat qilgan holda.

Keling, sinab ko'raylik. Faraz qilaylik, bizda quyidagi ob'ektlar massivi mavjud:

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

Keling, massivimizning har bir elementini alohida li teglarida chiqaraylik:

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