Stratégies pour des conditions multiples

Quand les conditions simples ne suffisent plus

Nous avons exploré plusieurs techniques pour le rendu conditionnel simple : l'opérateur ternaire pour les choix binaires et l'opérateur `&&` pour afficher ou masquer un seul élément. Cependant, les applications réelles présentent souvent des scénarios plus complexes où le contenu à afficher dépend de multiples conditions ou d'une variable pouvant prendre plusieurs valeurs distinctes. Tenter d'imbriquer des opérateurs ternaires ou de chaîner des `&&` devient rapidement illisible et difficile à maintenir.

Lorsque la logique conditionnelle dépasse un simple "si A alors B sinon C", il est temps d'adopter des stratégies plus structurées. L'objectif principal est de conserver un code clair, compréhensible et facile à déboguer, même lorsque la logique de rendu se complexifie. Heureusement, React, combiné aux capacités de JavaScript, offre plusieurs approches pour gérer élégamment ces situations.

Stratégie 1 : Le retour du `if / else if / else`

La structure `if / else if / else` classique de JavaScript reste l'une des solutions les plus claires et robustes pour gérer des conditions multiples. Comme nous l'avons vu pour le `if` simple, cette approche se place *avant* l'instruction `return` du composant. Vous déclarez une variable (par exemple `componentToRender`) et utilisez la chaîne `if / else if / else` pour lui assigner le JSX approprié en fonction des différentes conditions.

Cette méthode est particulièrement bien adaptée lorsque vous avez plusieurs chemins logiques exclusifs à évaluer séquentiellement.

function UserStatusDisplay({ status }) {
  let content;

  if (status === 'loading') {
    content = 
Chargement du profil...
;
  } else if (status === 'error') {
    content = 
Erreur lors du chargement.
;
  } else if (status === 'success') {
    content = ; // Un autre composant par exemple
  } else {
    // Cas par défaut ou état initial
    content = 
Statut inconnu.
;
  }

  return (
    

      {content}
    
  );
}

// Utilisation :
// 
// 

L'avantage principal est la lisibilité. Chaque condition et son rendu associé sont clairement séparés, rendant la logique facile à suivre.

Stratégie 2 : Extraire la logique dans des fonctions ou composants

Pour éviter d'encombrer le corps principal de votre composant avec une logique conditionnelle complexe, vous pouvez l'extraire dans une fonction d'aide (helper function) ou même dans un composant dédié. La fonction d'aide prendrait les props ou l'état nécessaires en arguments et retournerait le JSX approprié. Le composant principal appelle simplement cette fonction.

// Fonction d'aide
function renderNotificationContent(notification) {
  switch (notification.type) {
    case 'message':
      return 
Nouveau message de {notification.sender}
;
    case 'friend_request':
      return 
{notification.sender} vous a envoyé une demande d'ami.
;
    case 'system_alert':
      return Alerte système : {notification.text};
    default:
      return null; // Ne rien afficher pour les types inconnus
  }
}

function NotificationItem({ notification }) {
  // La clé serait gérée dans la liste parente qui utilise NotificationItem
  return (
    

      {renderNotificationContent(notification)} 
    
  );
}

// Utilisation dans une liste:
// notifications.map(notif => )

Cette approche améliore la séparation des préoccupations et rend le composant principal plus concis et focalisé sur sa structure globale.

Stratégie 3 : L'instruction `switch` pour les cas multiples basés sur une valeur

Lorsque vos conditions dépendent toutes de la valeur d'une seule variable (comme un statut, un type, etc.), l'instruction `switch` peut être une alternative plus propre qu'une longue chaîne de `if / else if`. Comme pour `if`, elle s'utilise généralement avant le `return` pour déterminer le contenu à rendre.

L'exemple précédent dans la Stratégie 2 utilisait déjà un `switch` à l'intérieur de la fonction d'aide, démontrant son efficacité pour gérer différents types de notifications de manière organisée.

Stratégie 4 : Lookup Objects/Maps (Approche plus avancée)

Pour des cas où vous mappez des valeurs spécifiques (souvent des chaînes ou des nombres) à des composants ou des éléments JSX, vous pouvez utiliser un objet littéral ou une `Map` comme table de correspondance. Cela peut parfois être plus déclaratif qu'un `switch` ou un `if/else if`.

import IconA from './IconA';
import IconB from './IconB';
import DefaultIcon from './DefaultIcon';

const iconMap = {
  'typeA': ,
  'typeB': ,
  // ... autres types
};

function IconRenderer({ iconType }) {
  // Récupère l'icône correspondante ou utilise une icône par défaut
  const IconComponent = iconMap[iconType] || ;

  return (
    
      {IconComponent}
    
  );
}

// Utilisation:
// 
//  // Affichera DefaultIcon

Cette technique est élégante mais peut être moins évidente pour des conditions complexes impliquant des comparaisons ou des logiques autres qu'une simple égalité de valeur.

Choisir la bonne approche : privilégier la clarté

Il n'y a pas une unique "meilleure" stratégie pour toutes les situations. Le choix dépend de la complexité spécifique de votre logique et de ce qui rendra votre code le plus lisible et maintenable pour vous et votre équipe.

En règle générale :

• Pour 2-3 conditions simples et exclusives : `if / else if / else` est souvent le plus clair.
• Pour de nombreux cas basés sur une seule valeur : `switch` ou un objet/Map lookup peuvent être plus concis.
• Si la logique devient trop volumineuse : Extrayez-la dans une fonction ou un composant séparé.
• Evitez à tout prix : Les opérateurs ternaires profondément imbriqués (`condition1 ? (condition2 ? A : B) : (condition3 ? C : D)`), car ils deviennent rapidement incompréhensibles.

L'objectif final est de structurer votre rendu conditionnel de manière à ce que la relation entre les conditions et le résultat affiché soit évidente à la lecture du code.