React 5 5 Ajouter des instructions de retour conditionnel

Après avoir géré l'affichage conditionnel dans Expenses.js, nous allons maintenant extraire la liste des dépenses dans un composant dédié. Cela rendra le code plus modulaire et sémantiquement plus propre, en utilisant une vraie liste HTML <ul> avec des <li>.

Création de ExpensesList.js

Créez deux nouveaux fichiers dans le dossier Expenses/ : ExpensesList.js et ExpensesList.css. Recopiez le CSS fourni (je vous expliquerai chaque règle plus tard). Dans ExpensesList.js, on importe React, le composant ExpenseItem et le fichier CSS :

import './ExpensesList.css';
import ExpenseItem from './ExpenseItem';

const ExpensesList = (props) => {
  if (props.items.length === 0) {
    return <h2 className="expenses-list__fallback">Pas de dépenses</h2>;
  }

  return (
    <ul className="expenses-list">
      {props.items.map((expense) => (
        <ExpenseItem
          key={expense.id}
          title={expense.title}
          amount={expense.amount}
          date={expense.date}
        />
      ))}
    </ul>
  );
};

export default ExpensesList;

Dans Expenses.js, on supprime tout le code de mapping et la variable expensesContent précédente. À la place, on importe ExpensesList et on l'utilise en passant les dépenses filtrées via la prop items : <ExpensesList items={filteredExpenses} />. On peut aussi retirer l'import de ExpenseItem puisqu'il n'est plus utilisé directement ici.

Refactor sémantique avec li

Petit ajustement supplémentaire : dans ExpenseItem.js, on remplace la <div> racine par une <li>. Visuellement, rien ne change. Mais sémantiquement, c'est beaucoup plus correct : un élément de liste à l'intérieur d'une <ul> est un <li>. Les lecteurs d'écran et les moteurs de recherche comprennent mieux la structure de la page.