React-də Uşaq Komponentləri Yaratmaq üçün Massiv

Tutaq ki, bizdə məhsullarla bir massiv var:

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

Gəlin ekranda üç Product komponenti çıxaraq, onlara prop-lar vasitəsilə massivimizdən məlumatları ötürək. Hələlik dövrədən istifadə etməyək, sadəcə massiv və obyekt elementlərinə müraciət edək:

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

Ekranda istifadəçi məlumatlarını çıxaran User komponenti hazırlayın. Bu məlumatlar ad, soyad, yaş olsun. İstifadəçi məlumatlarını üç td teqi ehtiva edən bir tr teqi kimi tərtib edin.

App komponentində aşağıdakı massiv verilmişdir:

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

Bu massivdən istifadə edərək üç istifadəçi çıxarın. Onların çıxarılışını table cədvəli şəklində tərtib edin.