3.12 Sortie de données dynamiques et utilisation d'expressions dans JSX

Après avoir ajouté du style à notre composant DepenseItem, nous passons à l'étape suivante : remplacer les données codées en dur par des données dynamiques. L'objectif est d'utiliser des constantes JavaScript et de les afficher dans le JSX à l'aide d'expressions entre accolades. C'est l'une des forces majeures de React.

Données dynamiques en JSX

• Déclarer des constantes en haut du composant.
• Utiliser le constructeur new Date() pour la date.
• Insérer les valeurs avec des accolades { } dans le JSX.
• Formater la date avec toString() ou toLocaleString().

Nous déclarons trois constantes : depensesDate (avec new Date(...)), depensesTitre (chaîne de caractères) et depensesMontant (nombre). Dans le return, nous remplaçons les textes codés en dur par des accolades qui contiennent les noms des constantes. JSX évalue ces expressions et les remplace par leur valeur à chaque rendu.

function DepenseItem() {
  const depensesDate = new Date(2022, 1, 28);
  const depensesTitre = "Assurance voiture";
  const depensesMontant = 290;

  return (
    <div className="depenses-item">
      <div>{depensesDate.toString()}</div>
      <div className="depenses-item__description">
        <h2>{depensesTitre}</h2>
        <div className="depenses-item__price">{depensesMontant} euros</div>
      </div>
    </div>
  );
}

Les accolades { } sont le pont entre le JavaScript et le JSX : tout ce qui se trouve à l'intérieur est évalué comme une expression JavaScript. C'est cette mécanique qui rend les composants React si puissants. Nous pourrons maintenant passer à l'étape suivante : améliorer la présentation de la date avec une logique JavaScript dédiée.