Props dans React

En React, props (abréviation de propriétés) sont un mécanisme puissant pour personnaliser et transmettre des données d'un composant parent à un composant enfant. Cette fonctionnalité nous permet de créer des composants réutilisables et flexibles au sein de l'application.

Transmission des Props

Imaginez que nous construisons une boutique en ligne.

Dans ce scénario, nous avons un composant principal appelé App, et nous voulons afficher les informations sur le produit en utilisant un composant Product. Nous pouvons passer le nom et le prix du produit en tant que props de App à Product.

Voici comment cela se fait en pratique :

Dans le composant App, nous incluons le composant Product et lui passons les props : name avec la valeur "Green iguana" et price avec la valeur 579.

Réception et Utilisation des Props

Maintenant, regardons le composant Product, qui reçoit ces props :

Dans le composant Product, nous le définissons pour accepter un seul argument appelé props. À l'intérieur du composant, nous pouvons accéder aux valeurs de ces props en utilisant la notation point (.) suivie du nom de la propriété (par exemple, props.name et props.price).

Utilisation Pratique

Avec cette approche, nous avons créé un composant Product qui peut être réutilisé avec différentes informations de produit plusieurs fois. Nous pouvons facilement personnaliser le contenu textuel de chaque composant Product en fournissant différents props.

Nous avons maintenant la flexibilité d'afficher divers détails de produit en utilisant le même composant Product.

Code Complet de l'Application :