Les props des composants dans NextJS

Dans NextJS, tout comme dans React, les données des composants parents vers les composants enfants peuvent être transmises via les props.

Voyons comment cela se fait en pratique. Supposons que notre composant enfant puisse recevoir des props :

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

Affichons-les dans le rendu du composant :

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

Supposons que notre composant enfant soit importé dans le composant parent :

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

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

Transmettons au composant enfant les données du composant parent :

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

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

Créez un composant enfant Product pour afficher un produit. Que les props transmettent le nom et le prix du produit.

Supposons que le tableau suivant de produits soit donné :

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

Affichez en boucle les données des produits, en utilisant le composant enfant Product.