Skik om Kinderkomponente in React te Skep

Laat ons 'n skikking met produkte hê:

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

Laat ons drie Product-komponente vertoon, en die data uit ons skikking as eienskappe aan hulle gee. Laat ons nie 'n lus gebruik nie, maar eenvoudig na die elemente van die skikking en objek verwys:

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

Maak 'n User-komponent wat die gebruikersdata vertoon. Laat hierdie data naam, van en ouderdom wees. Formateer die data as 'n tr-etiket wat drie td-etikette bevat.

Задание 2

In die App-komponent is die volgende skikking gegee:

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

Gebruik hierdie skikking om drie gebruikers te vertoon. Formateer hulle vertoning as 'n table-tabel.