NextJS में कंपोनेंट प्रॉप्स

NextJS में भी, React की तरह, डेटा पैरेंट कंपोनेंट से चाइल्ड कंपोनेंट में प्रॉप्स के माध्यम से पास किया जा सकता है।

आइए व्यवहार में देखें कि यह कैसे किया जाता है। मान लीजिए कि हमारा चाइल्ड कंपोनेंट प्रॉप्स स्वीकार कर सकता है:

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

आइए उन्हें कंपोनेंट के लेआउट में प्रदर्शित करें:

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

मान लीजिए कि पैरेंट कंपोनेंट में हमारा चाइल्ड कंपोनेंट शामिल है:

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

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

आइए चाइल्ड कंपोनेंट में पैरेंट से डेटा पास करें:

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

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

उत्पाद प्रदर्शित करने के लिए एक चाइल्ड कंपोनेंट Product बनाएं। मान लीजिए कि प्रॉप्स के रूप में उत्पाद का नाम और मूल्य पास किया जाता है।

मान लीजिए कि उत्पादों के साथ निम्नलिखित सरणी दी गई है:

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

चाइल्ड कंपोनेंट Product का उपयोग करके, लूप में उत्पादों के डेटा को प्रदर्शित करें।