3.13 Ajout d'une logique javascript normal aux composants

Dans cette vidéo, nous améliorons l'affichage de la date dans notre composant. Plutôt que d'afficher la date brute avec toString(), nous allons extraire le mois, le jour et l'année séparément, puis les afficher dans trois <div> distinctes. C'est une excellente occasion d'intégrer de la logique JavaScript classique dans un composant React.

Décomposer une date avec toLocaleString

• Utiliser props.date.toLocaleString('fr-FR', { ... }).
• Extraire le mois avec { month: 'long' }.
• Extraire le jour avec { day: '2-digit' }.
• Extraire l'année avec getFullYear().

Nous remplaçons le simple toString() par trois constantes (mois, jour, annee). Chacune utilise la méthode toLocaleString avec les options de formatage appropriées, en spécifiant la locale 'fr-FR' pour avoir les noms de mois en français. L'année, plus simple, se récupère via getFullYear() qui renvoie directement un nombre.

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>
      <div>{mois}</div>
      <div>{annee}</div>
      <div>{jour}</div>
    </div>
  );
}

Le rendu affiche désormais le mois, l'année et le jour séparés, ce qui ouvre la voie à un affichage très design (par exemple un calendrier minimaliste). Il reste quelques ajustements visuels à faire, mais la structure est en place. Nous attaquerons le prochain chapitre pour découper notre composant en sous-composants plus réutilisables.