3.16 Passer des données via des props

Dans cette vidéo, nous appliquons un concept fondamental de React : la transmission de données d'un composant parent à un composant enfant via les props. Au lieu de coder en dur les valeurs dans DepenseItem, nous déclarons un tableau de dépenses dans App.js et nous le parcourons pour générer plusieurs DepenseItem dynamiquement.

Mécanique des props

• Déclarer un tableau d'objets depenses dans App.js.
• Chaque objet a id, title, amount et date.
• Passer ces valeurs en attributs : title={...}.
• Récupérer avec props.title, props.amount, props.date.

Dans App.js, nous créons un tableau depenses contenant quatre objets (papier toilette, nouvelle TV, assurance voiture, PC) avec id, title, amount et date. Pour chaque dépense, nous instancions un <DepenseItem title={depense.title} amount={depense.amount} date={depense.date} />. Dans DepenseItem, nous remplaçons les valeurs codées en dur par props.title, props.amount et props.date.

// App.js
const depenses = [
  { id: 'd1', title: 'Papier toilette', amount: 9.99, date: new Date(2022, 1, 12) },
  { id: 'd2', title: 'Nouvelle TV', amount: 799.49, date: new Date(2022, 2, 12) },
  { id: 'd3', title: 'Assurance voiture', amount: 294.67, date: new Date(2022, 5, 28) },
  { id: 'd4', title: 'PC', amount: 450, date: new Date(2022, 6, 14) }
];

// DepenseItem.js
function DepenseItem(props) {
  return (
    <Card className="depenses-item">
      <DepenseDate date={props.date} />
      <h2>{props.title}</h2>
      <div className="depenses-item__price">{props.amount} euros</div>
    </Card>
  );
}

Le rendu affiche désormais les quatre dépenses avec chacune son propre titre, montant et date. C'est exactement le pattern fondamental de React : les données descendent du parent vers les enfants via les props, et les composants enfants se contentent d'afficher ce qu'ils reçoivent. Bonne pratique pour la suite : à très bientôt.