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
- É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>;
- 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 />}
- 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.
Le meilleur moyen d'apprendre React !
Rejoins par développeurs, cette formation reçoit une note de 4.7 / 5 🚀
Reçois 12 leçons premium pour maîtriser React et faire partie des meilleurs