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