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

Transmission des props

Supposons que nous construisons une boutique en ligne.

Dans ce contexte, nous avons un composant principal appelé App, et nous souhaitons afficher les informations d’un produit à l’aide d’un composant Product. Nous pouvons transmettre le nom et le prix du produit en tant que props de App à Product.

Voici comment cela se fait en pratique :

// Parent Component (`App`)
const App = () => (
  <>
    <h1>Online Store</h1>
    <Product name="Green iguana" price={579} />
  </>
);

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

Réception et utilisation des props

Examinons maintenant le composant Product, qui reçoit ces props :

// Child Component (`Product`)
const Product = (props) => (
  <>
    <p>Product name: {props.name}</p>
    <p>Price: ${props.price}</p>
  </>
);

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 produit à plusieurs reprises. Il est facile de personnaliser le contenu textuel de chaque composant Product en fournissant différentes props.

<Product name="Yellow cheetah" price={1099} />
<Product name="Panda" price={449} />

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

Code complet de l'application :