Uongezaji wa Mitindo wa React kwa Safu ya Vitu katika React

Hebu sasa tujifunze uwezo wa kuitikia kwa safu ya vitu. Katika kesi hii, tunapaswa kufanya mabadiliko yoyote, kukiashiria vipengee kwa id, ambazo zimehifadhiwa ndani ya vitu wenyewe.

Hebu tujaribu. Hebu tuseme tuna safu ifuatayo ya vitu:

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

Wacha tuonyeze kila kipengele cha yetu safu kwenye lebo tofauti ya 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>;
}