Props za Sehemu za NextJS

Katika NextJS, sawa na React, data kutoka kwa sehemu za mzazi hadi kwa sehemu za mtoto zinaweza kupitishwa kupitia props.

Wacha tuone jinsi hii inafanyika kwa vitendo. Hebu tuseme sehemu yetu ya mtoto inaweza kukubali props:

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

Wacha tuzionyeshe katika muundo wa HTML wa sehemu hiyo:

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

Hebu tuseme sehemu ya mzazi inajumuisha sehemu yetu ya mtoto:

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

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

Wacha tuwasilishe kwenye sehemu ya mtoto data kutoka kwa mzazi:

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

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

Tengeneza sehemu ya mtoto Product kwa ajili ya kuonyesha bidhaa. Hebu props zitumiwe kusambaza jina na bei ya bidhaa.

Hebu tuseme kuna safu ifuatayo ya bidhaa:

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

Onyesha kwa kutumia mzunguko data za bidhaa, kwa kutumia sehemu ya mtoto Product.