Les Conditions

Les conditions en JSX

Dans React, il est fréquent de devoir afficher du contenu différent en fonction de certaines conditions. Pour cela, l'affichage de JSX peut être conditionné en utilisant des syntaxes JavaScript telles que les instructions if, ainsi que l'opérateurs && ou encore l'opérateur ternaire ?:.

Un opérateur ternaire permet de vérifier une condition et d'exécuter une action ou une autre en fonction de cette condition, le tout en une seule ligne. C'est une manière plus rapide et compacte de faire un if-else. Si la condition est vraie, il exécute la première instruction, sinon il exécute la seconde. Cela simplifie le code et le rend plus facile à lire notamment dans le JSX.

Voici quelques exemples simples pour illustrer l'utilisation de conditions dans React :

Utilisation de ?:

Voici un exemple d'utilisation de l'opérateur ternaire :

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Bienvenue</h1> : <h1>Veuillez vous connecter</h1>}
    </div>
  );
}

Dans cet exemple, si isLoggedIn est vrai, le message "Bienvenue" s'affiche. Si isLoggedIn est faux, "Veuillez vous connecter" est renvoyé.