React 5 4 Sortie de contenu conditionnel

Dans ce cours, nous allons gérer le cas où la liste des dépenses filtrées est vide (par exemple aucune dépense pour l'année 2020). Plutôt que d'afficher une liste vide sans message, nous voulons afficher quelque chose comme « Pas de dépenses » pour informer l'utilisateur.

Rendu conditionnel dans le JSX

Dans Expenses.js, juste au-dessus de filteredExpenses.map(), on ne peut pas écrire directement if ou for entre les accolades du JSX — la syntaxe ne le permet pas. Mais on peut utiliser des expressions, comme l'opérateur ternaire ou le court-circuit logique (&&).

Première approche : on vérifie si filteredExpenses.length === 0. La propriété .length sur un tableau retourne le nombre d'éléments. Si elle vaut zéro, on affiche un paragraphe « Pas de dépenses », sinon on affiche la liste mappée :

{filteredExpenses.length === 0 ? (
  <p>Pas de dépenses pour cette année.</p>
) : (
  filteredExpenses.map((expense) => (
    <ExpenseItem key={expense.id} ... />
  ))
)}

Stocker du JSX dans une variable

Pour rendre le code plus lisible, on peut extraire le contenu dans une variable avant le return :

let expensesContent = <p>Pas de dépenses pour cette année.</p>;

if (filteredExpenses.length > 0) {
  expensesContent = filteredExpenses.map((expense) => (
    <ExpenseItem key={expense.id} ... />
  ));
}

return (
  <div>
    ...
    {expensesContent}
  </div>
);

expensesContent reçoit par défaut le message « Pas de dépenses ». Si la liste filtrée a au moins un élément, on l'écrase avec le map() qui produit les composants. Cette approche est plus propre quand la logique conditionnelle est complexe. Dans le JSX, on insère simplement {expensesContent}. C'est la manière la plus lisible que je connaisse pour gérer les rendus conditionnels en React. Il en existe d'autres, libre à vous de choisir.

En résumé

Cette leçon enseigne comment afficher du contenu de manière conditionnelle en React. L'instructeur montre comment vérifier si un tableau filtré contient des éléments en utilisant la propriété `length`, puis utiliser l'opérateur ternaire (?) pour afficher soit un message « Il n'y a pas de dépenses », soit la liste des dépenses filtrées. Il explique également que les instructions `if` et les boucles ne peuvent pas être utilisées directement entre les accolades JSX, et démontre comment stocker le rendu conditionnel dans une variable pour plus de clarté du code.

Points clés

On ne peut pas utiliser `if` ou les boucles directement dans JSX ; seules les expressions sont autorisées entre les accolades
L'opérateur ternaire (?) est la manière standard de faire du rendu conditionnel en React
On vérifie si un tableau est vide en utilisant `length === 0` pour afficher un message par défaut
On peut stocker le contenu rendu conditionnellement dans une variable pour améliorer la lisibilité du code
Le `.map()` combiné avec l'opérateur ternaire permet d'afficher une liste filtrée ou un message vide
On utilise `.filter()` pour pré-filtrer les données avant le rendu (ex: par année ou montant)

Questions fréquentes

Pourquoi ne peut-on pas utiliser `if` ou `for` directement dans JSX ?

Parce que `if` et `for` sont des déclarations, pas des expressions. Dans JSX, seules les expressions sont autorisées entre les accolades `{}`. L'opérateur ternaire `? :` et les méthodes de tableau comme `.map()` sont des expressions et fonctionnent correctement.

Comment on vérifie qu'un tableau est vide en React ?

On utilise la propriété `length` du tableau. Si `length === 0`, le tableau est vide. On peut alors afficher un message par défaut au lieu de la liste.

Peut-on rendre le code plus lisible en mettant la logique conditionnelle dans une variable ?

Oui, on peut déclarer une variable (ex: `dépensesContent`) qui contient le rendu conditionnel, puis l'afficher ensuite en l'interpolant dans JSX. Cela rend le code plus organisé et plus facile à comprendre.