Component Props in NextJS

In NextJS, just like in React, data from parent components to child components can be passed through props.

Let's see how this is done in practice. Let our child component be able to accept props:

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

Let's display them in the component's markup:

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

Let our child component be imported in the parent component:

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

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

Let's pass data from the parent component to the child component:

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

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

Create a child component Product for displaying a product. Let the product name and price be passed via props.

Given the following array of products:

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

Display the product data in a loop, using the child component Product.