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.