Masīvs bērnu komponentu izveidei React

Pieņemsim, ka mums ir produkts masīvs:

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

Parādīsim trīs Product komponentus ekrānā, padodot viņiem datus no mūsu masīva kā props. Pagaidām neizmantosim ciklu, bet vienkārši piekļūsim masīva un objekta elementiem:

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

Izveidojiet User komponentu, kas parāda lietotāja datus ekrānā. Ļaujiet šiem datiem būt vārdam, uzvārdam, vecumam. Noformējiet lietotāja datus kā tr tagu, kas satur trīs td tagus.

App komponentā ir dots šāds masīvs:

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

Izmantojot šo masīvu, parādiet trīs lietotājus. Noformējiet to izvadi kā table tabulu.