Composants conditionnels et itératifs

Dans une application React, on est souvent amené à vérifier des conditions afin de décider si on doit afficher un tel ou tel composant (ou simplement un élément comme un texte ou une image).

Ce qu’il faut retenir, c’est que la structures if… else est envisageable uniquement en dehors du JSX, donc avant le return de la fonction qui implémente le composant. C’est d’ailleurs cette partie du code qui est consacrée à la logique du composant et qui renferme des traitements comme la création des states et des event handlers.

Pareil pour les structures itératives comme les boucles for et while. On peut s’en servir en dehors du JSX seulement.

Exprimer une condition dans le JSX

Imaginez que l’on souhaite simuler une vue qui vérifie si l’utilisateur est authentifié ou non. S’il est authentifié, alors on affiche un message de bienvenue, sinon, on affiche le formulaire d’authentification.
Je propose ce code simplifié :
Au début, on a initialisé une variable nommée auth avec la valeur true pour supposer que l'utilisateur est authentifié. Dans le JSX (le bloc return de la fonction qui implémente le composant <App />), on se sert de l'opérateur logique && qui se chargera de vérifier si la condition est vraie avant d'afficher l'élément souhaité.

Par exemple dans:
La balise <h2> ne sera affichée que si la variable auth vaut true. C'est une méthode simple et peu verbeuse pour conditionner l'affichage.

Pareil pour le bloc suivant:
Dans ce cas, on vérifie si la condition n'est pas vraie pour afficher le formulaire d'authentification.
Au lieu d'exprimer deux conditions, nous allons plutôt utiliser la structure ternaire comme ceci:

Exprimer les boucles dans le JSX

Comme je l'ai mentionné plus haut, l'utilisation des structures for ou while n'est pas permise dans le JSX, mais on peut s'en servir librement dans la partie consacrée à la logique du composant. Donc, comment faire si on veut boucler sur les éléments?

En React, les tableaux sont pris en charge par défaut lors du rendering. C'est à dire que le fait de placer un tableau dans le JSX permet d'afficher automatiquement ses éléments comme s'ils étaient indépendants. Donc, on va profiter de cette particularité et on utilisera la fameuse méthode map() qui permet de retourner un tableau modifié à partir du tableau original.

Je vous invite à consulter cette partie du cours où j'ai expliqué le fonctionnement de la méthode map() dans le cours consacré au langage Javascript.

Imaginons que l'on souhaite afficher trois boutons qui portent respectivement les lettres "A", "B" et "C".

Je propose le code suivant:
L'astuce consiste à initialiser un tableau (tab dans l'exemple) dans la partie consacrée à la logique du composant. Rappelez-vous que dans cette partie du code, vous pouvez utiliser du Javascript librement, y compris les structures conditionnelles et itératives. Ensuite, on applique la méthode map() dans le JSX et qui retourne un autre tableau transformé. Dans notre cas, on créé un nouveau tableau dont les éléments sont les boutons qui renferment les valeurs du tableau initial.

Sur le navigateur, on est sensé avoir ce résultat:

Utiliser la prop key

En React, la prop key (ou key prop) sert à identifier de manière unique un élément d'une liste (tableau dans notre cas). En gros, la key prop permet d'indiquer précisément quel élément a été changé entre les rendus afin qu'il soit mis à jour indépendamment des autres, ce qui est plus rapide et efficace.

Ajoutons la key prop à nos éléments:
Dans ce cas, nous avons juste spécifié les éléments du tableau comme des valeurs de notre key prop. Cela fonctionne à condition que ces éléments soient uniques. Cependant, il existe une autre méthode bien plus simple, il s'agit de de l'utilisation du deuxième argument de la méthode map() et qui renvoie l'indice de l'élément courant (ce qui garantit des valeurs uniques):
Bien entendu, vous pouvez aussi appliquer les techniques vues dans cette section aux composants personnalisés que vous importez dans le composant principal.