Maintenant que vous savez créer et modifier des états réactifs, on va apprendre à les utiliser pour afficher certains éléments seulement quand c’est nécessaire.

Imaginez une application qui affiche un message de bienvenue uniquement quand l’utilisateur est connecté, ou un bouton seulement si une certaine action est disponible.

C’est ce que l’on appelle de l’affichage conditionnel, et avec React, c’est très facile !

Impossible d’utiliser un if

Dans React, vous ne pouvez pas utiliser directement une instruction if dans le retour du JSX :

return (
  <div>
    {
		  if (isLoggedIn) {
		    <p>Bienvenue !</p>
		  } else {
		    <p>Connectez-vous !</p>
		  }
    }
  </div>
);

❌ Erreur