Matriz para crear componentes hijos en React

Supongamos que tenemos una matriz con productos:

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

Vamos a mostrar tres componentes Product, pasándoles los datos de nuestra matriz como props. Por ahora no usaremos un bucle, sino que simplemente accederemos a los elementos del array y del objeto:

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

Crea un componente User que muestre los datos del usuario en pantalla. Que estos datos sean nombre, apellido, edad. Formatea los datos del usuario en forma de etiqueta tr que contenga tres etiquetas td.

Задание 2

En el componente App se da la siguiente matriz:

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},
];

Utilizando esta matriz, muestra tres usuarios. Formatea su visualización como una tabla table.