Réutilisez vos composants avec les props

Vous l'avez compris : la réutilisation des composants est au cœur de la logique de React. Mais, pour être réutilisés, les composants requièrent souvent une configuration. Bonne nouvelle : pour ça, vous allez pouvoir utiliser les props !

Revenons à notre site de plantes. Nous allons maintenant créer un nouveau composant qui va être réutilisé. L'idée est de créer une échelle d'arrosage et une échelle de luminosité pour chaque plante.

Rouvrons ShoppingList.jsx  où nous ajoutons les données correspondantes dansplantList  :

• une donnéewaterqui correspond à l'arrosage conseillé pour chaque plante ;

• et une donnéelightqui correspond à l'ensoleillement nécessaire.

Familiarisez-vous avec la syntaxe des props

Commençons par la lumière : dans chaque item plante, on vient ajouter un composant  CareScale  et on lui passe la prop  scaleValue  :

<carescale scalevalue="{plant.light}"></carescale>

Eh bien, les props sont récupérées dans les paramètres de la fonction qui définit notre composant.

Il y a deux façons de récupérer les props :

1. la méthode classique,

2. la méthode moderne (recommandée).

Méthode classique :

const CareScale = (props) => {
    const scaleValue = props.scaleValue
    return <div>{scaleValue}☀️</div>
}

Méthode moderne :

const CareScale = ({ scaleValue }) => {
&nbsp; return <div>{scaleValue}☀️</div>
}
export default CareScale

On va donc partir sur une liste, qu'on peut créer manuellement. Ce qui nous donne :

const CareScale = ({ scaleValue }) => {
  const range = [1, 2, 3]

  return (
    <div>
      {range.map((rangeElem) =>
        scaleValue >= rangeElem ? (
          <span key={rangeElem.toString()}>☀️</span>
        ) : null
      )}
    </div>
  )
}

export default CareScale

Félicitations ! Vous venez d'utiliser les props !

Créez des paramètres

On va pousser la logique un peu plus loin afin de véritablement paramétrer notre composant.

Je vais commencer par préciser une prop pour le type que j'appellerai  careType  pour mon composant  CareScale  et réutiliser ce composant entre l'ensoleillement et l'arrosage :

<carescale caretype="water" scalevalue="{plant.water}">
<carescale caretype="light" scalevalue="{plant.light}"></carescale></carescale>

Il faut maintenant que j'adapte  CareScale  pour récupérer le  careType.

Regardez comme c'est simple : je vais récupérer deux props au lieu d'une seule dans mon composant !

const CareScale = ({ scaleValue, careType }) => {
    const range = [1, 2, 3]
    const scaleType = careType === 'light' ? '☀️' : '💧'

    return (
        <div>
            {range.map((rangeElem) =>
            scaleValue >= rangeElem ? (
                <span key="{rangeElem.toString()}">{scaleType}</span>
                ) : null
            )}
        </div>
    )
}

export default CareScale

C'est une fonctionnalité très pratique de JavaScript ! Au lieu d'écrire :

const CareScale = (props) => {
    const scaleValue = props.scaleValue
    const careType = props.careType
    // ... reste du code
}

Je peux directement "extraire" ce qui m'intéresse :

const CareScale = ({ scaleValue, careType }) =>{
    // J'ai directement accès à scaleValue et careType !
}

C'est comme si je disais :

"Dans l'objet que je reçois, donne-moi directement  scaleValue  et  careType  ".

Comme vous l'avez vu ici, nous avons utilisé deux syntaxes différentes pour nos props :

1. Pour  careType, nous lui avons assigné une  string  , entre guillemets.

2. En revanche, pour  scaleValue, nous lui avons attribué la valeur d'un objet, que nous avons passée entre accolades.

En pratique, une prop peut avoir n'importe quelle valeur possible en JavaScript, mais syntaxiquement, en JSX, on n'a en gros que deux possibilités :

• un littéral String matérialisé par des guillemets ;

• ou, pour tout le reste (booléen, number, expression Javascript, etc.), des accolades {}.

Faites descendre les données, des parents vers les enfants

Dans notre exemple,  CareScale  est l'enfant, et  ShoppingList  est le parent.

Pour les props, vous devez garder deux règles à l'esprit :

1. Une prop est toujours passée par un composant parent à son enfant : c'est le seul moyen normal de transmission.

2. Une prop est considérée en lecture seule dans le composant qui la reçoit.

Découvrez la prop technique children

Ce qui nous donne :

<Parent>

  <Enfant1 />

  <Enfant2 />

</Parent>

Par exemple, si on utilise children pour réécrire la  Banner  , cela nous donnerait dans  App.jsx  :

<Banner>
  <img src={logo} alt='La maison jungle' />
  <h1 className='lmj-title'>La maison jungle</h1>
</Banner>

Ici,  img  et  h1  sont les nœuds enfants dans le DOM de  Banner.

Et on peut accéder à ces nœuds enfants de  Banner  dans ses paramètres, un peu de la même manière qu'on récupérerait des props :

const Banner = ({ children }) => {
    return <div classname="lmj-banner">{children}</div>
}

export default Banner

Gérez les types de props avec rigueur

Les props constituent un aspect clé de React. Mais, en les manipulant, vous verrez qu'il peut être très facile de faire des erreurs. Cela vient notamment de la flexibilité de JavaScript, qui fait du typage dynamique (les types  string,  int, etc.).

Pour vous donner un exemple d'erreur classique :

1. Vous passez une prop value à un composant.

2. Vous utilisez une liste de valeurs, certaines valeurs sont des strings, d'autres des nombres.

3. Vous appliquez la méthode .toUpperCase() à votrevalue: boum !

4. Une erreur !.toUpperCase() n'existe pas sur un nombre.

À vous de jouer !

Vous allez pouvoir utiliser vos connaissances pour enrichir notre site de plantes. 

• Vous allez créer un composant  PlantItem  qui sera un composant enfant de  ShoppingList.

PlantItem  prend en props :

1. namepour le nom de la plante ;

2. coverpour l'image correspondante ;

3. idqui correspond à l'item de chaque élément ;

4. light;

5. water.

• Les props  name  et  cover  seront utilisées directement dans  PlantItem  .

• light  et  water  , que nous avons déjà créées ensemble, seront passées au composant  CareScale  dans  PlantItem  .

• Vous trouverez dans  styles/PlantItem.css  les classes CSS  lmj-plant-item-cover  et  lmj-plant-item  qui vous aideront à créer de beaux composants.

• Je vous propose également de remplacer nos emojis par les icônes 'sun' et 'water' que vous trouverez dans  /assets  .

En résumé

• Les props sont des objets que l'on peut récupérer dans les paramètres de notre composant fonction.

• Il existe deux syntaxes pour assigner une valeur à une prop :

  1. les guillemets pour lesstring(texte) ;

  2. les accolades pour tout le reste : nombres, expressions JavaScript, booléen, etc.

• Les accolades{ }dans les paramètres permettent de récupérer directement les props qui nous intéressent (au lieu d'écrireprops.nomDeLaPropà chaque fois).

• Une prop est :

  • toujours passée par un composant parent à son enfant ;

  • considérée en lecture seule dans le composant qui la reçoit.

• La propchildrenest renseignée en imbriquant les enfants dans le parent :<Parent><Enfant /></Parent>.

• childrenest utile lorsqu'un composant ne connaît pas ses enfants à l'avance.

Alors, les props n'ont plus de secret pour vous ? Est-ce que vous vous rendez compte qu'avec tout ce que vous avez appris, notre site de plantes prend de plus en plus forme ?

Mais vous ne trouvez pas qu'il reste encore un peu trop statique ? Qu'on ne peut pas assez interagir avec lui ? Ça tombe bien, parce que c'est le programme du prochain chapitre ! À tout de suite !