Les props des composants dans React

Dans la leçon précédente, nous avons affiché plusieurs instances de produits :

function App() {
	return <div>
		<Product />
		<Product />
		<Product />
	</div>;
}

Pour l'instant, chaque appel de la balise produit affiche la même chose à l'écran. Maintenant, rendons chaque produit unique.

Supposons, par exemple, que chaque produit doive avoir un nom et un prix. Faisons en sorte que chaque appel de la balise produit affiche un produit avec son propre nom et son prix, formatés dans le code HTML que nous souhaitons.

Pour ce faire, nous devons suivre plusieurs étapes.

Pour commencer, lors de l'appel de la balise produit, nous allons écrire deux attributs dans cette balise : l'attribut name avec le nom du produit et l'attribut cost avec le prix, comme ceci :

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

Les noms et les valeurs de ces attributs arriveront sous forme d'objet dans le premier paramètre de la fonction constructeur de notre composant Product :

function Product(props) {
	console.log(props); // objet avec les clés name et cost
	
	return <p>
		product
	</p>;
}

Le nom du paramètre peut être n'importe lequel, mais dans React, il est conventionnel de l'appeler props. En fait, ce n'est pas seulement un nom de paramètre, mais un concept important de React.

L'essence de ce concept est la suivante : lors de l'appel d'une balise de composant, on peut écrire des attributs avec des données dans cette balise. Ces données arriveront dans les props du composant. Ensuite, le composant peut utiliser ces données, par exemple, pour créer le code HTML souhaité.

Faisons cela :

function Product(props) {
	return <p>
		nom : <span>{props.name}</span>,
		prix : <span>{props.cost}</span>
	</p>;
}

Il est plus pratique et plus conventionnel de ne pas utiliser l'objet props directement, mais d'effectuer immédiatement une déstructuration des props directement dans les paramètres de la fonction :

function Product({ name, cost }) {
	return <p>
		nom : <span>{name}</span>,
		prix : <span>{cost}</span>
	</p>;
}

Créez un composant Employee affichant les données d'un employé à l'écran. Que ces données soient le nom, le prénom, le patronyme et le salaire. Formatez ces données dans le code HTML de votre choix. Affichez dans le composant App trois employés avec des données différentes.