Retour • 26/11/2024

Les ternaires en React : le guide complet

Écris par Melvyn Malherbe le 26/11/2024

Quand j'ai commencé React, j'avais du mal à comprendre pourquoi on utilisait autant les ternaires au lieu des if.

Dans ce post, on va voir :

• Comment fonctionne un ternaire en JavaScript
• Pourquoi les ternaires sont si populaires en React
• La différence entre expression et statement
• Des exemples concrets d'utilisation

C'est quoi un ternaire ?

Un ternaire est une expression qui permet de faire une condition en une seule ligne. Voici un exemple simple :

La syntaxe est la suivante :

condition ? valeurSiVrai : valeurSiFaux

C'est l'équivalent de ce code avec un if :

Pourquoi utiliser des ternaires en React ?

En React, on utilise beaucoup les ternaires car ils sont des expressions et non des statements. Mais c'est quoi la différence ?

• Une expression retourne une valeur
• Un statement exécute une action

Le JSX n'accepte que des expressions entre les accolades {}. C'est pour ça qu'on ne peut pas utiliser un if directement dans le JSX :

// ❌ Ceci ne fonctionne pas
const Button = ({ isLoading }) => {
  return (
    <button>
      {if (isLoading) {
        return "Chargement...";
      } else {
        return "Cliquez-moi";
      }}
    </button>
  );
};

Par contre, on peut utiliser un ternaire car c'est une expression :

Pourquoi ça fonctionne avec JSX ?

Pour comprendre pourquoi les ternaires fonctionnent avec JSX, regardons comment React transforme notre code JSX en JavaScript :

// Notre code JSX
const Button = ({ isLoading }) => {
  return (
    <button>
      {isLoading ? "Chargement..." : "Cliquez-moi"}
    </button>
  );
};

// Ce que React en fait
const Button = ({ isLoading }) => {
  return React.createElement(
    "button",
    null,
    isLoading ? "Chargement..." : "Cliquez-moi" // Une expression !
  );
};

Comme tu peux le voir, le ternaire est utilisé comme un argument de React.createElement. C'est pour ça qu'il doit être une expression qui retourne une valeur !

Je l'explique aussi très bien dans mon article qui t'explique comment les tableaux fonctionnent en JavaScript.

Des exemples concrets d'utilisation

1. Afficher/Masquer un élément

2. Changer les styles conditionnellement

3. Chaîner plusieurs conditions

Les bonnes pratiques

1. Évite les ternaires trop complexes

// ❌ Difficile à lire
{isLoading ? 
  <LoadingSpinner /> 
  : isError ? 
    <ErrorMessage error={error} /> 
    : data ? 
      <DataDisplay data={data} /> 
      : <EmptyState />}

// ✅ Plus lisible avec une fonction
const renderContent = () => {
  if (isLoading) return <LoadingSpinner />;
  if (isError) return <ErrorMessage error={error} />;
  if (data) return <DataDisplay data={data} />;
  return <EmptyState />;
};

return <div>{renderContent()}</div>;

2. Utilise && pour les conditions simples

Attention tu peux utiliser && uniquement quand la valeur de gauche est un boolean. Sinon tu risques d'avoir des valeurs affichées dans ton JSX que tu ne veux pas.

// Au lieu de
{isVisible ? <MyComponent /> : null}

// Tu peux écrire
{isVisible && <MyComponent />}

3. Extrait la logique complexe

// ❌ Logique complexe dans le JSX
{user.age >= 18 && user.hasLicense && !user.isBanned ? 
  <DriveButton /> : <RestrictedAccess />}

// ✅ Logique extraite dans une variable ou fonction
const canDrive = user.age >= 18 && user.hasLicense && !user.isBanned;
return <div>{canDrive ? <DriveButton /> : <RestrictedAccess />}</div>;

Conclusion

Les ternaires sont un outil puissant en React car :

• Ils sont des expressions qui fonctionnent avec JSX
• Ils permettent d'écrire des conditions de manière concise
• Ils sont parfaits pour les conditions simples

Si tu veux approfondir tes connaissances en React, je t'invite à découvrir ma formation React complète.