React හි HTML වගුවක් ලෙස වස්තූන් අරාව ප්රදර්ශනය කිරීම
නැවතත් අපගේ නිෂ්පාදන අරාව ලබා දී ඇතැයි සිතමු:
const prods = [
{id: 1, name: 'product1', cost: 100},
{id: 2, name: 'product2', cost: 200},
{id: 3, name: 'product3', cost: 300},
];
අපගේ අරාවේ මූලද්රව්ය HTML වගුවක් ලෙස ප්රදර්ශනය කරමු:
function App() {
const rows = prods.map(function(item) {
return <tr key={item.id}>
<td>{item.name}</td>
<td>{item.cost}</td>
</tr>;
});
return <table>
<tbody>
{rows}
</tbody>
</table>;
}
අපගේ වගුවට තීරු ශීර්ෂ එකතු කරමු:
function App() {
const rows = prods.map(function(item) {
return <tr key={item.id}>
<td>{item.name}</td>
<td>{item.cost}</td>
</tr>;
});
return <table>
<thead>
<tr>
<td>නම</td>
<td>වටිනාකම</td>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>;
}
App සංරචකයේ පහත අරාව ලබා දී ඇත:
const users = [
{id: 1, name: 'user1', surn: 'surn1', age: 30},
{id: 2, name: 'user2', surn: 'surn2', age: 31},
{id: 3, name: 'user3', surn: 'surn3', age: 32},
];
මෙම අරාවේ මූලද්රව්ය table වගුවක් ලෙස
ප්රදර්ශනය කරන්න, එවිට වස්තුවේ සෑම ක්ෂේත්රයක්ම
එහිම td ටැගයට පැමිණේ. ඔබේ වගුවේ තීරු ශීර්ෂ
සාදන්න.
