Passer des valeurs à un composant React

Pour passer des valeurs à un composant React, on va utiliser des propriétés. C’est là tout l’avantage des composants : on réutilise quelque chose de répétitif (les composants) en changeant uniquement quelques valeurs : les propriétés. Ainsi, passer des valeurs à un composant react vous permettra d’avoir quelque chose comme ceci :

<Article name="Casquette" price="20.00">Casquette noire XL</Article>

Les propriétés dans les composants React

Dans l’article précédent (“Créer un composant React”), nous avons créé notre composant “Article” pour montrer qu’on pouvait réutiliser plusieurs fois le même composant dans le rendu html en utilisant simplement <Article/>.

Comme pour les contrôles HTML, on peut ajouter des attributs à ce composant pour avoir par exemple ceci :

<Article name="Casquette" price="20.00">Casquette noire XL</Article>

Tous ces attributs se retrouvent dans un paramètre qu’on va nommer “props” qui va être passé à la fonction représentant notre composant. En effet, vous vous souvenez surement que dans notre précédent article (“Créer un composant React”) le composant Article.js était en fait une fonction qui retourne le rendu HTML.

Voici donc à quoi va ressembler notre fonction si nous lui passons des paramètres :

const article = (props) => { ...

A présent, nous avons bien un paramètre props. C’est lui qui va contenir les attributs passés à notre composant “Article” ainsi que la valeur enfant “Casquette noire XL” de notre example.

Mais comment accéder et afficher nos valeurs “name”, “price” et la valeur enfant de notre composant ? C’est assez simple, voici le code :

const article = (props) => {
    return (
        <div>
            <p>{props.name} ({props.price}€) - {props.children}</p>
        </div>
    )
};

On a donc nos propriétés qui sont passées dans un objet “props” qui lui même contient maintenant les propriétés “name”, “price” et “children”. Pour afficher ces données dans le rendu HTML retourné par cette fonction, rien de plus simple : props.notre_propriété ou props.children pour la valeur enfant de notre composant.

Petite remarque : n’oubliez pas dans le return d’ajouter des parenthèses () pour indiquer au javascript que cela représente bien un rendu HTML à transformer via JSX (je vous passe les détails).

Ainsi, vous aurez un rendu dans le style suivant:

Casquette (20.00€) – Casquette noire XL

En résumé

En résumé, vous avez vu que le passage des propriétés est simple:

• Dans votre composant, vous passez des attributs et une valeur <Article attribut1=”xxx” attribut2=”yyy”>valeur_enfant</Article>
• Dans le code js de votre composant :
  • Vous ajoutez un paramètre “props” à votre définition de fonction
  • Vous affichez les valeurs des attributs via {props.attribut1}
  • Vous affichez la valeur enfant via {props.children}

Rien de plus simple ;-). J’espère que cet article vous aura plu et vous aura été utile. N’hésitez pas à vous abonner à ce blog pour ne rien manquer. N’hésitez pas non plus à partager et à commenter cet article.

Je vous dis à bientôt sur le blog “Développement-web-facile.com“.