Safu ya Kuunda Viungo Vya Watoto katika React

Tuchukulie tuna safu ya bidhaa:

const 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:

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

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.

Katika kiungo App kuna safu ifuatayo:

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

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