Transmettre une dépense avec des props

Une dépense existe déjà dans vos données, mais votre interface doit encore pouvoir en afficher les détails. Pour cela, un composant enfant reçoit les valeurs dont il a besoin depuis son parent, au lieu de créer ou de conserver ses propres données. Vous allez afficher une dépense dans une ligne dédiée et vérifier que TypeScript contrôle les informations transmises.

Dans la leçon précédente, vous avez défini le type Depense et créé le composant fonctionnel App. Vous allez les réutiliser tels quels. Une prop est une valeur fournie à un composant par l’élément qui le rend : dans cet exemple, App transmet une dépense à LigneDepense.

Définir les props du composant

Pour que le composant sache ce qu’il peut recevoir, vous déclarez un type pour ses props. Ici, la prop depense utilise le type Depense déjà établi. Le composant peut ainsi lire la description, le montant, la catégorie et la date sans redéfinir la structure de ces données.

import type { Depense } from "../types";

type LigneDepenseProps = {
  depense: Depense;
};

export default function LigneDepense({ depense }: LigneDepenseProps) {
  return (
    <li className="depenses-liste__element">
      <span>{depense.description}</span>
      <span className="depenses-categorie">{depense.categorie}</span>
      <span>{depense.date}</span>
      <span>{depense.montant.toFixed(2)} €</span>
    </li>
  );
}

Le composant reçoit un objet dont la forme est vérifiée par TypeScript. La syntaxe { depense } récupère cette prop directement dans les paramètres de la fonction ; vous pouvez ensuite lire chacun de ses champs dans le JSX. La classe de la ligne et celle de la catégorie respectent le contrat du projet.

Transmettre la dépense depuis App

Le parent fournit la prop avec un attribut JSX nommé depense. Pour rendre l’exemple immédiatement testable, App prépare une dépense de démonstration et la transmet à LigneDepense. Les données descendent ainsi du parent vers l’enfant ; la ligne les affiche sans les modifier.

import type { Depense } from "./types";
import LigneDepense from "./composants/LigneDepense";

const depenseExemple: Depense = {
  description: "Courses",
  montant: 42.5,
  categorie: "Alimentation",
  date: "2025-03-12",
};

export default function App() {
  return (
    <div className="depenses-app">
      <header className="depenses-entete">
        <h1 className="depenses-entete__titre">Tableau de bord des dépenses</h1>
      </header>

      <main className="depenses-principale">
        <section aria-label="Liste des dépenses">
          <h2>Dépenses</h2>
          <ul className="depenses-liste">
            <LigneDepense depense={depenseExemple} />
          </ul>
        </section>
      </main>
    </div>
  );
}

Dépenses
Courses · Alimentation · 2025-03-12 · 42.50 €

L’exemple suppose que le type Depense de la leçon précédente est exporté depuis src/types.ts ; si son fichier porte un autre nom dans votre projet, conservez son chemin réel dans les deux imports. Le parent transmet une valeur conforme au type attendu, et la ligne affiche le montant avec deux décimales. Une prop manquante ou un champ incorrect produit une erreur TypeScript plutôt qu’une interface fondée sur une donnée incohérente.

À retenir

• Vous déclarez une forme de props typée pour préciser les données acceptées par un composant.
• Vous lisez les props dans les paramètres du composant et utilisez leurs champs dans son JSX.
• Le parent transmet la dépense à l’enfant avec une prop, en respectant le type Depense.
• La ligne affiche les données reçues sans conserver une copie ni modifier la dépense.

Dans la prochaine leçon, vous assemblerez les composants du tableau de bord autour de responsabilités distinctes.