Safu ya Kuunda Viungo Vya Watoto katika React

Tuchukulie tuna safu ya bidhaa:

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

Wacha tuonyeshe viungo vitatu Product kwenye skrini, tukiwapeleka data kutoka kwenye safu yetu kupitia props. Kwa sawa tusitumie kitanzi, bali tu turejelee vipengele vya safu na kitu moja kwa moja:

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

Tengeneza kiungo User, kinachotoa data ya mtumiaji kwenye skrini. Data hizi zinaweza kuwa jina, jina la ukoo, umri. Weka data ya mtumiaji kwa kutumia kitambulisho tr, kilicho na vitambulisho vitatu td.

Задание 2

Katika kiungo App kuna safu ifuatayo:

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

Kwa kutumia safu hii, onyesha watumiaji watatu. Washa maonyesho yao kwa kutumia jedwali table.