Le rendu conditionnel nous permet d'afficher ou de masquer des éléments en fonction de certaines conditions de manière dynamique, améliorant ainsi la flexibilité des composants React. Cette section explorera deux techniques standard de rendu conditionnel : l'opérateur && et l'opérateur ternaire.

Rendu Conditionnel avec l'Opérateur &&

Syntaxe

L'opérateur && dans React est utilisé pour le rendu conditionnel et fonctionne de manière similaire à une instruction if en JavaScript. Il nous permet de rendre des éléments en fonction de conditions spécifiques.

Cette technique est souvent employée lorsque nous voulons afficher un élément uniquement si une condition particulière s'évalue à true.

Exemple

Prenons un exemple où nous voulons notifier les étudiants qui ont réussi un examen. Si le score d'un étudiant dépasse 60 points, nous afficherons un message de réussite avec son nom et son score.

Le composant Notification rend conditionnellement un élément paragraphe <p> basé sur la valeur de la prop mark.

Code complet de l'application

Le score d'Emily n'est pas affiché car il est inférieur à 60pts.

Rendu conditionnel avec l'opérateur ternaire

Syntaxe

Le rendu conditionnel utilisant l'opérateur ternaire (? ... : ...) est une autre technique puissante. Il offre un moyen concis de rendre des éléments en fonction de conditions.

Cette approche est adaptée lorsque vous devez choisir entre deux éléments distincts en fonction d'une condition.

Exemple

Considérons un scénario où nous voulons saluer les utilisateurs différemment en fonction de leur connexion. Le composant Greeting démontre le rendu conditionnel avec l'opérateur ternaire.

Dans cet exemple, le composant Greeting salue les utilisateurs différemment en fonction de la valeur de la prop loggedIn.

Code complet de l'application

Remarque

Bien que les deux techniques permettent d'obtenir un rendu conditionnel, il est essentiel de comprendre leurs différences. L'opérateur && est idéal lorsque vous souhaitez rendre un élément uniquement lorsqu'une condition spécifique est remplie. En revanche, l'opérateur ternaire est adapté aux cas où vous devez choisir entre deux éléments distincts en fonction d'une condition.