React'ta Alt Bileşenler Oluşturmak için Dizi

Bir ürün dizimiz olduğunu varsayalım:

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

Dizimizden verileri prop'lar aracılığıyla ileterek ekranda üç tane Product bileşeni gösterelim. Şimdilik döngü kullanmayalım ve sadece dizi ve nesne elemanlarına doğrudan erişelim:

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

Kullanıcı verilerini ekranda gösteren bir User bileşeni yapın. Bu veriler ad, soyad, yaş olsun. Kullanıcı verilerini üç tane td etiketi içeren bir tr etiketi içinde düzenleyin.

App bileşeninde aşağıdaki dizi verilmiştir:

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 diziyi kullanarak üç kullanıcıyı gösterin. Çıktılarını bir table tablosu içinde düzenleyin.