3.10.1-ecriture-de-code-jsx

Après avoir personnalisé notre composant, nous continuons le projet de gestion de dépenses. L'objectif ici est d'afficher dans le composant DepenseItem trois informations : la date, le titre (description) de la dépense et son montant. C'est l'occasion de comprendre une règle fondamentale de JSX : un composant doit retourner un seul élément racine.

Règle fondamentale de JSX

• Un composant doit retourner un seul élément racine.
• Si plusieurs éléments frères, il faut les envelopper.
• On utilise généralement une <div> parente.
• Ne pas oublier le point-virgule en fin d'expression.

Si vous essayez d'écrire deux <div> côte à côte sans élément parent, JSX vous renvoie une erreur. La solution est simple : enveloppez tout dans une <div> racine. À l'intérieur, vous pouvez ajouter autant d'éléments enfants que nécessaire. Nous créons donc une <div> pour la date, une autre pour le titre avec un <h2>, et une dernière pour le montant.

function DepenseItem() {
  return (
    <div>
      <div>28 mars 2022</div>
      <div>
        <h2>Assurance voiture</h2>
        <div>290 euros</div>
      </div>
    </div>
  );
}

Une fois le code sauvegardé, le navigateur affiche immédiatement « 28 mars 2022 », « Assurance voiture » et « 290 euros ». Cette structure imbriquée respecte la règle de JSX d'un seul élément racine et nous donne une base solide pour la prochaine étape : ajouter du style CSS pour rendre ce composant plus agréable visuellement.