NextJS da komponentlarning prop'lari

NextJS da, xuddi React dagi kabi, ma'lumotlarni ota komponentlardan farzand komponentlarga prop'lar orqali uzatish mumkin.

Keling, buni amalda qanday bajarilishini ko'raylik. Farzand komponentimiz prop'larni qabul qilishi mumkin deb faraz qilaylik:

export default function Child({text1, text2}) {
	return <p>
		child
	</p>;
}

Keling ularni komponentning verstkasida chiqaramiz:

export default function Child({text1, text2}) {
	return <p>
		child
		{text1}
		{text2}
	</p>;
}

Faraz qilaylik, ota komponentda bizning farzand komponentimiz ulangan:

import Child from '@/comp/child/child.jsx';

export default function Test() {
	return <>
		<h1>Test</h1>
		<Child />
	</>;
}

Keling, farzand komponentga ota komponentdan ma'lumotlarni uzataylik:

import Child from '@/comp/child/child.jsx';

export default function Test() {
	return <>
		<h1>Test</h1>
		<Child text1="aaa" text2="bbb" />
	</>;
}

Mahsulot chiqarish uchun Product farzand komponentini yarating. Prop'lar orqali mahsulot nomi va narxi uzatilsin.

Quyidagi mahsulotlar massivi berilgan deb faraz qilaylik:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

Product farzand komponentidan foydalanib, tsiklda mahsulotlar ma'lumotlarini chiqaring.