Reactda voris komponentlarga stavlarni uzatish

Faraz qilaylik, bizda quyidagi mahsulotlar massivi berilgan:

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

Faraz qilaylik, bu massiv Products komponentida joylashgan. Keling, ushbu mahsulotlarni komponent holatiga yozamiz:

function Products() {
	const [prods, setProds] = useState(initProds);
}

Endi keling, mahsulotlarni tsikl bilan aylantiramiz va ularni qandaydir veb-sahifa dizaynida ko‘rsatamiz:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <div key={prod.id}>
			name: <span>{prod.name}</span>,
			cost: <span>{prod.cost}</span>
		</div>;
	});
	
	return <div>
		{items}
	</div>;
}

Ko‘rib turganingizdek, bizning map tsiklimizning mazmuni yetarlicha murakkab, ayniqsa agar mahsulot veb-sahifa dizayni kelajakda kengayib borsa. Bunday murakkablik kodni o‘qish, tushunish va qo‘llab-quvvatlashni qiyinlashtiradi.

Mahsulotni ko‘rsatishga javob beradigan kodni alohida komponentga chiqarish yaxshiroq bo‘ladi. Uni Product deb nomlaymiz. Mana bizning komponentimiz kodi:

function Product({ name, cost }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</div>;
}

Keling, endi Products komponenti ichida map tsikli ichida Product voris komponentlaridan foydalanamiz:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key ={prod.id}
			name={prod.name}
			cost={prod.cost}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Ko‘rib turganingizdek, endi tsikl kodi soddalashdi va tushunish uchun ko‘proq tushunarli bo‘ldi. Bundan tashqari, endi mahsulotni ko‘rsatish uchun alohida komponent javobgar bo‘lib, unda biz mahsulotlarning veb-sahifa dizaynini yaratishimiz va keyin tahrirlashimiz mumkin.

Texnik jihatdan, shunday bo‘ladiki, ota komponent ma'lumotlar bilan holatga ega, voris komponentlar esa ushbu ma'lumotlarni prop (props) ko‘rinishida oladi va ularni biz xohlagan tarzda ko‘rsatadi.

Users komponenti holatida quyidagi massiv berilgan:

const initUsers = [
	{id: id(), name: 'user1', surname: 'surn1', age: 30},
	{id: id(), name: 'user2', surname: 'surn2', age: 31},
	{id: id(), name: 'user3', surname: 'surn3', age: 32},
];

Ushbu massivni tsikl bilan aylantiring va barcha foydalanuvchilarni ekranda ko‘rsating. Foydalanuvchini ko‘rsatish uchun alohida User komponentini yarating.