Rendu conditionnel

Les applications réelles affichent des choses différentes selon la situation — un formulaire de connexion quand l'utilisateur n'est pas authentifié, un message de bienvenue quand il l'est, un spinner de chargement pendant la récupération des données, un message d'erreur quand quelque chose ne va pas.

Dans React, le rendu conditionnel signifie afficher différents éléments ou composants en fonction d'une condition. Puisque JSX n'est que des expressions JavaScript, tu peux utiliser toute la logique conditionnelle de JavaScript pour décider quoi afficher.

Il existe plusieurs modèles pour le rendu conditionnel dans React, chacun adapté à différentes situations :

1. Opérateur ternaire — Choisir entre deux alternatives
2. ET logique (&&) — Afficher quelque chose ou rien
3. Retour anticipé — Ignorer le reste du composant
4. Assignation de variable — Préparer le contenu avant le return

Explorons chacun de ces modèles.

L'opérateur ternaire (condition ? siVrai : siFaux) est la façon la plus courante de faire du rendu conditionnel dans JSX. Il fonctionne directement à l'intérieur des accolades et te permet de choisir entre deux morceaux de JSX :

function LoginStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Bon retour, utilisateur !</p>
      ) : (
        <p>Veuillez vous connecter.</p>
      )}
    </div>
  );
}

Tu peux utiliser les ternaires n'importe où dans JSX — pour des éléments entiers, pour du contenu textuel, pour des attributs, ou pour des props de composant :

function Button({ isPrimary }) {
  return (
    <button 
      className={isPrimary ? 'btn-primary' : 'btn-secondary'}
    >
      {isPrimary ? 'Enregistrer' : 'Annuler'}
    </button>
  );
}

Tu peux aussi imbriquer des ternaires, mais cela devient rapidement difficile à lire :

// Évite les ternaires profondément imbriqués
{status === 'loading' ? (
  <Spinner />
) : status === 'error' ? (
  <Error />
) : (
  <Content />
)}

Pour plus de deux conditions, envisage d'utiliser des retours anticipés ou une variable à la place (abordés dans les sections suivantes).

Le ternaire est idéal quand tu as exactement deux alternatives et que la logique est assez simple pour être lue en ligne.

Quand tu veux afficher quelque chose ou ne rien afficher, l'opérateur ET logique (&&) est plus clair qu'un ternaire avec null :

function Notification({ message, show }) {
  return (
    <div>
      <h1>Tableau de bord</h1>
      {show && <p className="notification">{message}</p>}
    </div>
  );
}

Si show est true, React affiche l'élément <p>. Si show est false, React n'affiche rien.

Cela fonctionne grâce à la façon dont l'opérateur && de JavaScript évalue :

• true && <element> retourne <element> (affiché)
• false && <element> retourne false (React ignore false, null, et undefined)

Attention au chiffre zéro ! C'est un piège courant :

const count = 0;

// BUG : Cela affiche "0" à l'écran, pas rien !
{count && <p>Tu as {count} éléments</p>}

Pourquoi ? Parce que 0 && <element> retourne 0, et React affiche bien le chiffre 0. La solution est de rendre la condition explicitement booléenne :

// CORRECT : Convertir en booléen d'abord
{count > 0 && <p>Tu as {count} éléments</p>}

Utilise && quand :

• Tu veux afficher un élément ou rien.
• La condition est un booléen (ou tu l'as convertie en un).

Le modèle && est parfait pour les éléments d'interface optionnels comme les messages d'erreur, les badges, les infobulles, ou les sections conditionnelles.

Les retours anticipés te permettent de gérer les cas spéciaux en haut de ton composant avant d'atteindre la logique de rendu principale :

function UserProfile({ user }) {
  if (!user) {
    return <p>Aucun utilisateur trouvé.</p>;
  }

  if (user.isBanned) {
    return <p>Ce compte a été suspendu.</p>;
  }

  // Rendu principal — atteint seulement si l'utilisateur existe et n'est pas banni
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
    </div>
  );
}

Les retours anticipés sont excellents quand une condition signifie que le composant doit afficher quelque chose de complètement différent. Ils gardent la logique de rendu principale propre et non indentée.

L'assignation de variable est utile quand la logique conditionnelle est trop complexe pour des ternaires en ligne :

function StatusMessage({ status }) {
  let content;

  if (status === 'loading') {
    content = <p>Chargement...</p>;
  } else if (status === 'error') {
    content = <p>Quelque chose s'est mal passé !</p>;
  } else if (status === 'empty') {
    content = <p>Aucune donnée disponible.</p>;
  } else {
    content = <p>Voici tes données.</p>;
  }

  return (
    <div className="status">
      <h2>Statut</h2>
      {content}
    </div>
  );
}

Tu peux aussi utiliser une instruction switch ou même une recherche d'objet pour mapper des valeurs à des composants :

const icons = {
  success: <span>Succès</span>,
  warning: <span>Avertissement</span>,
  error: <span>Erreur</span>,
};

function StatusIcon({ type }) {
  return icons[type] || <span>Inconnu</span>;
}

Afficher null fait qu'un composant n'affiche rien :

function Warning({ show, message }) {
  if (!show) return null;
  return <p className="warning">{message}</p>;
}

Retourner null est une façon légitime de dire "ce composant n'a rien à afficher pour le moment."