Le rendu conditionnel permet d'afficher ou de masquer dynamiquement des éléments en fonction de certaines conditions, améliorant ainsi 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 && dans 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 utilisée lorsque l'on souhaite afficher un élément uniquement si une condition particulière est vraie.

Exemple

Prenons un exemple où nous souhaitons notifier les étudiants ayant réussi un examen. Si le score d'un étudiant dépasse 60 points, un message de réussite affichant son nom et son score 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 (? ... : ...) constitue 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 lorsque l'on souhaite 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