React හි වස්තූන් අරාවකට ප්‍රතික්‍රියාශීලී එකතු කිරීම
දැන් අපි වස්තූන් අරාවක ප්‍රතික්‍රියාශීලීත්වය
අධ්‍යයනය කරමු. මෙම අවස්ථාවෙහිදී, ඕනෑම
වෙනස්කමක් සිදු කිරීම සඳහා අපි
වස්තූන් ඇතුළතම ගබඩා කර ඇති
id අනුව මූලද්‍රව්‍ය වෙත යොමු විය යුතුය.
අපි උත්සාහ කරමු. අප සතුව පහත වස්තූන් අරාව ඇතැයි සිතමු:
const 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 ටැගයකින් ප්‍රදර්ශනය කරමු:
function 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>;
}
බොත්තමක් සාදන්න, එය එබූ විට
අරාවේ අවසානයට නව මූලද්‍රව්‍යයක්
එකතු වන අතර, එමගින් නව
li එකක් ul ටැගයේ අවසානයට එකතු කරයි.
ආදාන ක්ෂේත්‍ර තුනක් සහ බොත්තමක් සාදන්න. බොත්තම
එබූ විට, ආදාන ක්ෂේත්‍රවල දත්ත වලින් නව
li එකක් ul ටැගයේ අවසානයට සාදන්න.
