Օբյեկտների զանգվածի արտածում HTML աղյուսակի տեսքով React-ում
Ենթադրենք, կրկին տրված է մեր ապրանքների զանգվածը.
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 թեգի մեջ: Կազմեք ձեր աղյուսակի
սյունակների վերնագրերը:
