Skik om Kinderkomponente in React te Skep

Laat ons 'n skikking met produkte hê:

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

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

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.

In die App-komponent is die volgende skikking gegee:

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

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