3. Conditionner un affichage

Parfois, on a besoin d’afficher un bout de template que si certaines conditions spécifiques sont remplies. Par exemple, afficher un message à l’utilisateur seulement si l’utilisateur est majeur, c’est-à-dire que son âge est supérieur à 18. Dans ce cas, on pourrait se dire « Chouette, ce sera simple, il suffit d’utiliser if en JavaScript« .

Je vous arrête tout de suite, votre joie ne vas pas durer. Désolé. 🥺

En fait, rappelez-vous que JSX accepte les expressions JavaScript, et non les instructions. Donc dans JSX, vous ne pouvez pas utiliser les mots-clefs if, for ou encore déclarer une variable. Vous devez faire cela côté composant.

Heureusement, il existe une petite astuce, en utilisant tout simplement les opérateurs logiques ET (&&), OU (||), et l’opérateur ternaire que vous avez le droit d’utiliser dans vos templates JSX. Avec ces opérateurs logiques, il est possible de simuler une condition en JSX. Pour cela, il faut combiner trois choses :

Une condition + && + portion de JSX à afficher si la condition est respectée

Grâce à l’opérateur logique &&, si la condition échoue, alors toute l’expression vaudra false, et JSX ne fera rien apparaître dans le navigateur de l’utilisateur.

Essayons d’afficher un message dans notre template, seulement si un utilisateur est majeur :

import React, { FunctionComponent, useState } from 'react';

const App: FunctionComponent = () => {
  const [age, setAge] = useState<number>(22);

  return (
   <div>
    {age > 18 &&
     <p>Vous êtes majeur, donc vous pouvez voir ce contenu.</p>
    }
   </div>
  );
}

export default App;

Le template ci-dessus ne s’affichera que si l’utilisateur est majeur. Dans ce code, on retrouve à la ligne 18 :

  • notre condition age > 18
  • , l’opérateur logique &&
  • Le code JSX qui sera affiché si la condition est respecté

Et comment mettre en place l’équivalent du else ?

Effectivement, comment mettre en place la fameuse condition « si … alors … sinon ». Et bien, pour cela nous allons utiliser l’opérateur ternaire. Reprenons notre exemple précédent, et essayons d’afficher un message différent si l’utilisateur est majeur ou mineur :

import React, { FunctionComponent, useState } from 'react';

const App: FunctionComponent = () => {
 const [age, setAge] = useState<number>(14);

 return (
  <p>{age > 18 ? (
   Vous êtes majeur, donc vous pouvez voir ce contenu.
  ) : (
   Vous êtes mineur, il faut attendre encore un peu avant de pouvoir voir ce contenu.
  )};
}

export default App;

À la ligne 7, on met en place notre opérateur ternaire. Si la condition est vraie, alors on affiche le message pour l’utilisateur majeur. Sinon, on affiche le message pour l’utilisateur mineur. Ce n’est pas plus compliqué que ça.

Alors je suis d’accord avec vous, la syntaxe n’est pas extraordinaire, mais c’est le seul moyen pour afficher des conditions dans votre DOM virtuel. Je vous annonce donc que nous allons devoir faire avec. 👍