Props Komponen di NextJS

Di NextJS, sama seperti di React, data dari komponen induk ke komponen anak dapat diteruskan melalui props.

Mari kita lihat bagaimana hal ini dilakukan dalam praktiknya. Misalkan komponen anak kita dapat menerima props:

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

Mari kita tampilkan mereka di markup komponen:

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

Misalkan di komponen induk komponen anak kita diimpor:

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

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

Mari kita teruskan data dari induk ke komponen anak:

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

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

Buatlah komponen anak Product untuk menampilkan produk. Misalkan melalui props diteruskan nama dan harga produk.

Misalkan diberikan array berikut berisi produk:

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

Tampilkan dalam loop data produk, menggunakan komponen anak Product.