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 :
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
:
En React, on utilise beaucoup les ternaires car ils sont des expressions et non des statements. Mais c'est quoi la différence ?
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 :
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.
// ❌ 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>;
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 />;
}
// ❌ 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>;
Les ternaires sont un outil puissant en React car :
Si tu veux approfondir tes connaissances en React, je t'invite à découvrir ma formation React complète.