Propsat e Komponentëve në NextJS

Në NextJS, njësoj si në React, të dhënat nga komponentët prind në komponentët fëmijë mund të kalohen përmes propsave.

Le të shohim se si bëhet kjo në praktikë. Le të supozojmë se komponenti ynë fëmijë mund të pranojë propsa:

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

Le t'i shfaqim ato në strukturën e komponentit:

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

Le të supozojmë se komponenti prind përfshin komponentin tonë fëmijë:

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

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

Le t'i kalojmë komponentit fëmijë të dhënat nga prindi:

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

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

Krijoni një komponent fëmijë Product për të shfaqur një produkt. Le të kalohen si propsa emri dhe çmimi i produktit.

Le të jepet vargu i mëposhtëm me produkte:

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

Shfaqni në një cikël të dhënat e produkteve, duke përdorur komponentin fëmijë Product.