React 5 5 Add conditional return instructions

Après avoir créé notre liste de dépenses dans le cours précédent, nous allons maintenant créer un composant React dédié pour isoler le rendu de la liste. Nous créons deux nouveaux fichiers : ExpensesList.js pour le composant et ExpensesList.css pour le style associé. L'objectif est de séparer la logique d'affichage dans son propre composant plutôt que de la laisser mélangée dans Expenses.js.

Dans ExpensesList.js, nous commençons par importer React puis le composant ExpenseItem. Nous définissons une fonction fléchée ExpensesList qui reçoit les props et retourne le rendu. Ensuite, nous coupons le code de rendu présent dans Expenses.js (à partir du filteredExpenses.map(...) jusqu'en bas) puisqu'il n'a plus sa place là-bas. On le colle dans le nouveau composant et on remplace la variable filteredExpenses par props.items : la liste filtrée n'existe plus ici, le composant reçoit simplement ses articles via les props.

Importer le nouveau composant dans Expenses.js

Dans Expenses.js, nous pouvons retirer l'import de ExpenseItem, importer ExpensesList en haut, et remplacer le bloc de rendu existant par <ExpensesList items={filteredExpenses} />. La liste filtrée est ainsi passée en prop au composant enfant qui se charge de l'afficher.

Dans le retour de ExpensesList, nous utilisons maintenant une liste non ordonnée <ul> avec la classe CSS expenses-list définie dans la feuille de style. Pour des raisons sémantiques, nous modifions aussi ExpenseItem : au lieu de retourner un <div>, le composant englobe sa carte avec un élément <li>. Visuellement rien ne change, mais le balisage est plus correct sémantiquement.

  • ExpensesList.js et ExpensesList.css isolent le rendu de la liste.
  • Le composant reçoit ses données via props.items.
  • ExpenseItem retourne désormais un <li> pour respecter la sémantique d'une liste.

Summary

This lesson covers creating a new `ExpensesList` component file with accompanying CSS to organize expense rendering logic. You'll refactor by importing necessary React components and dependencies, then using props to pass expense data instead of filtering within the main component. The component renders an unordered list with semantic HTML, wrapping individual expense items in `<li>` elements rather than `<div>` tags for improved accessibility.

Key points

  • Create separate ExpensesList.js and ExpensesList.css files to improve code organization and component responsibility
  • Import React and child components (ExpenseItem, ExpensesList) at the top of the file structure
  • Replace filtered expenses logic with props-based approach (props.items) for cleaner, more reusable component design
  • Use semantic HTML by wrapping expense items in <li> elements and the list in <ul> instead of generic <div> containers
  • Remove unnecessary imports and variables from parent component after refactoring (like ExpenseItem import from Expenses.js)
  • Implement conditional rendering to display appropriate content when expenses list is empty or populated

FAQ

Why create a separate ExpensesList component instead of keeping all logic in Expenses.js?

Separating into dedicated components follows the single responsibility principle, improving code organization, readability, and reusability. Each component can focus on a specific task rather than handling multiple concerns.

What's the advantage of using props.items instead of props.filteredExpenses?

Using props.items simplifies the component and makes it more flexible by delegating filtering logic elsewhere. The ExpensesList component becomes purely responsible for rendering the list structure, not managing data filtering.

Why wrap items in <li> elements instead of <div> tags?

Using semantic HTML (<li> inside <ul>) is crucial for accessibility and SEO. It properly communicates list structure to browsers and assistive technologies like screen readers, improving the overall user experience.