Массив баро эҷоди компонентҳои фарзандӣ дар React

Фарз мекунем, ки мо массиви маҳсулотҳо дорем:

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

Биёед се компоненти Product-ро ба экран чоп кунем, дар ҳоле ки маълумоти массивро ба онҳо дар пропсҳо мегузаронем. Ҳоло ҳалқа истифода намебарем, балки танҳо ба элементҳои массив ва объект ишора мекунем:

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

Компоненти User-ро созед, ки маълумоти корбарро ба экран чоп кунад. Ин маълумотҳо ном, насаб ва синни корбар бошанд. Маълумотҳои корбарро дар шакли теги tr, ки дорои се теги td аст, созмон диҳед.

Дар компоненти App массиви зерин дода шудааст:

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

Бо истифода аз ин массив се корбарро чоп кунед. Намоиши онҳоро дар шакли як ҷадвали table созмон диҳед.