# Массив для создания дочерних компонентов в React

Пусть у нас есть массив с продуктами:

`const prods = [ {id: id(), name: 'product1', cost: 100}, {id: id(), name: 'product2', cost: 200}, {id: id(), name: 'product3', cost: 300}, ];`

Давайте выведем на экран три компонента `Product`, передав им в пропсы данные из нашего массива. Пока не будем использовать цикл, а просто будем обращаться к элементам массива и объекта:

`function App() { return <div> <Product name={prods[0].name} cost={prods[0].cost} /> <Product name={prods[1].name} cost={prods[1].cost} /> <Product name={prods[2].name} cost={prods[2].cost} /> </div>; }`

Сделайте компонент `User`, выводящий данные юзера на экран. Пусть этими данными будут имя, фамилия, возраст. Оформите данные юзера в виде тега `tr`, содержащего три тега `td`.

В компоненте `App` дан следующий массив:

`const users = [ {id: id(), name: 'user1', surn: 'surn1', age: 30}, {id: id(), name: 'user2', surn: 'surn2', age: 31}, {id: id(), name: 'user3', surn: 'surn3', age: 32}, ];`

С помощью этого массива выведите трех юзеров. Оформите их вывод в виде таблицы `table`.

← →
↑