Les ternaires en React : le guide complet

26/11/2024 • Melvynx

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 :

<!DOCTYPE html>
<html>

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>

<body>
  <h1>Hello world</h1>
</body>

</html>

La syntaxe est la suivante :

condition ? valeurSiVrai : valeurSiFaux;

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

<!DOCTYPE html>
<html>

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>

<body>
  <h1>Hello world</h1>
</body>

</html>

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 :

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 :

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

export default function App() {
return (
  <div>
    <Button isLoading={false} />
    <Button isLoading={true} />
  </div>
);
}

Open Sandbox

Pourquoi ça fonctionne avec JSX ?

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

JSX

// 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

import { useState } from 'react';

export default function App() {
const [isVisible, setIsVisible] = useState(false);

return (
  <div>
    <button onClick={() => setIsVisible(!isVisible)}>
      {isVisible ? "Cacher" : "Afficher"}
    </button>
    
    {isVisible ? (
      <p>Je suis visible !</p>
    ) : null}
  </div>
);
}

Open Sandbox

2. Changer les styles conditionnellement

import { useState } from 'react';

export default function App() {
const [isError, setIsError] = useState(false);

return (
  <div>
    <button onClick={() => setIsError(!isError)}>
      Toggle Error
    </button>
    
    <input 
      style={{
        border: isError ? "2px solid red" : "2px solid green",
        padding: "5px",
        margin: "10px"
      }}
      type="text"
      placeholder="Entre ton texte"
    />
  </div>
);
}

Open Sandbox

3. Chaîner plusieurs conditions

const Status = ({ status }) => {
return (
  <span>
    {status === "loading" ? "⏳" 
      : status === "success" ? "✅" 
      : status === "error" ? "❌"
      : "❓"}
  </span>
);
};

export default function App() {
return (
  <div>
    <Status status="loading" />
    <Status status="success" />
    <Status status="error" />
    <Status status="unknown" />
  </div>
);
}

Open Sandbox

Les bonnes pratiques

Évite les ternaires trop complexes

JSX

// ❌ 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>;

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.

JSX

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

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

Extrait la logique complexe

JSX

// ❌ 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.

Reçois une formation React gratuite

Deviens un expert React en comprenant tous les concepts avancés de cette librairie.