# Вывод массива объектов в виде 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`. Сделайте заголовки колонок вашей таблицы.

← →
↑