3.14 Diviser les composants en plusieurs composants

Notre composant DepenseItem commence à être chargé : il gère l'affichage de la date, du titre et du montant. C'est le moment de le diviser en plusieurs composants plus petits et réutilisables. Nous allons extraire la logique d'affichage de la date dans un composant DepenseDate dédié, qui pourra être réutilisé n'importe où.

Découpage en sous-composants

• Créer un nouveau fichier DepenseDate.js.
• Y déplacer la logique de la date.
• Recevoir la date via props.date.
• Importer et utiliser le composant dans DepenseItem.

Nous créons DepenseDate.js qui contient une fonction DepenseDate(props) renvoyant la structure visuelle de la date (mois, année, jour). Le composant est exporté avec export default DepenseDate. Dans DepenseItem.js, nous importons ce nouveau composant et l'utilisons comme une balise auto-fermante <DepenseDate date={...} />, en lui passant la date via une prop.

// DepenseDate.js
import "./DepenseDate.css";

function DepenseDate(props) {
  const mois = props.date.toLocaleString('fr-FR', { month: 'long' });
  const jour = props.date.toLocaleString('fr-FR', { day: '2-digit' });
  const annee = props.date.getFullYear();

  return (
    <div className="depenses-date">
      <div>{mois}</div>
      <div>{annee}</div>
      <div>{jour}</div>
    </div>
  );
}

export default DepenseDate;

Nous créons aussi un DepenseDate.css pour styler ce sous-composant. Cette approche par composition est au cœur de React : chaque composant a une responsabilité unique, son propre style et peut être réutilisé. Plus l'application grandit, plus ce découpage devient indispensable pour garder un code maintenable. À bientôt pour la suite.