Le rendu conditionnel permet d’afficher ou de masquer dynamiquement des éléments en fonction de certaines conditions, ce qui améliore la flexibilité des composants React. Cette section explore deux techniques courantes de rendu conditionnel : l’opérateur && et l’opérateur ternaire.

Rendu conditionnel avec l’opérateur &&

Syntaxe

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

condition && (<p>element</p>)

Cette technique est souvent employée lorsque l’on souhaite afficher un élément uniquement si une condition particulière est vraie.

Exemple

Prenons un exemple où l’on souhaite notifier les étudiants ayant réussi un examen. Si la note d’un étudiant dépasse 60 points, un message de réussite affichant son nom et sa note sera présenté.

const Notification = (props) =>
  props.mark > 60 && (
    <p>
      {props.name} has passed the test with {props.mark} points.
    </p>
  );

Le composant Notification affiche conditionnellement un élément paragraphe <p> en fonction de la valeur de la propriété 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 à l’aide de l’opérateur ternaire (? ... : ...) est une autre technique puissante. Il offre un moyen concis d’afficher des éléments en fonction de conditions.

condition ? (true_element) : (false_element)

Cette approche convient lorsqu’il s’agit de choisir entre deux éléments distincts selon une condition.

Exemple

Considérer un scénario où l’on souhaite saluer les utilisateurs différemment selon leur connexion. Le composant Greeting illustre le rendu conditionnel avec l’opérateur ternaire.

const Greeting = (props) =>
  props.loggedIn ? (
    <p>Welcome to the home page, {props.name}.</p>
  ) : (
    <p>Hello {props.name}, could you please log in.</p>
  );

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

Code complet de l’application

Remarque

Bien que les deux techniques permettent le rendu conditionnel, il est essentiel de comprendre leurs différences. L’opérateur && est idéal lorsque vous souhaitez afficher un élément uniquement si une condition spécifique est remplie. En revanche, l’opérateur ternaire convient lorsque vous devez choisir entre deux éléments distincts selon une condition.