Низа за креирање на деца компоненти во React

Да претпоставиме дека имаме низа со производи:

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

Ајде да прикажеме три компоненти Product, пренесувајќи им ги податоците од нашата низа како пропсови. За сега нема да користиме циклус, туку едноставно ќе се повикуваме на елементите од низата и објектот:

jsxfunction 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>;
}

Задание 1

Направете компонента User која ќе ги прикажува податоците за корисникот на екранот. Нека овие податоци бидат име, презиме, возраст. Оформете ги податоците за корисникот во вид на таг tr, кој содржи три тага td.

Задание 2

Во компонентата App е дадена следнава низа:

jsxconst 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.