Listes, clés et rendu conditionnel

Pour afficher une liste en React, on transforme un tableau de données en tableau d'éléments JSX avec map, et on donne à chaque élément une clé (key) unique et stable. Pour afficher un élément sous condition, on utilise un if avant le return, l'opérateur ternaire ou &&. Ce chapitre détaille ces techniques, le rôle exact des clés et les pièges classiques, dont celui du zéro.

Afficher une liste avec map

JSX n'a pas de boucle for. On utilise la méthode map des tableaux, qui renvoie un nouveau tableau, ici un tableau d'éléments que React affiche à la suite :

import type { FicheResume } from '../types';
import { CarteFiche } from './CarteFiche';

type ListeFichesProps = {
  fiches: FicheResume[];
};

export function ListeFiches({ fiches }: ListeFichesProps) {
  return (
    <ul className="liste-fiches">
      {fiches.map((fiche) => (
        <li key={fiche.id}>
          <CarteFiche fiche={fiche} />
        </li>
      ))}
    </ul>
  );
}

Pour trois fiches, map produit trois <li>. Note les parenthèses après la flèche : (fiche) => ( … ) renvoie directement le JSX. Avec des accolades, il faudrait écrire return : (fiche) => { return <li>…</li>; }. Oublier ce return est une erreur fréquente, qui affiche une liste vide sans aucun message.

On peut enchaîner filter, toSorted et map pour préparer la liste :

{fiches
  .filter((f) => f.etat !== 'MP')                      // sans les fiches déjà mises en paiement
  .toSorted((a, b) => b.mois.localeCompare(a.mois))    // la plus récente d'abord
  .map((f) => <li key={f.id}>{f.mois}</li>)}

toSorted renvoie une copie triée sans modifier le tableau d'origine, qui appartient peut-être au parent (les props sont en lecture seule, chapitre 3). Les mois au format "2026-10" se trient correctement comme des chaînes, car l'année vient en premier et le mois a toujours deux chiffres.

À quoi servent les clés

Quand la liste change (un frais ajouté au début, un autre supprimé), React doit savoir quel élément de la nouvelle liste correspond à quel élément de l'ancienne. La clé sert d'identifiant :

• même clé dans les deux rendus : c'est le même élément, React le met à jour ;
• nouvelle clé : React crée un élément ;
• clé disparue : React supprime l'élément, et l'état des composants qu'il contenait.

Sans clé, React affiche un avertissement dans la console : « Each child in a list should have a unique "key" prop ».

Règles d'une bonne clé :

1. Unique parmi les frères (deux listes différentes peuvent réutiliser les mêmes clés).
2. Stable : le même élément garde la même clé d'un rendu à l'autre.
3. Venue des données : l'identifiant de la base (fiche.id) est la clé idéale.

La clé se place sur l'élément renvoyé par map, pas à l'intérieur du composant enfant. Et elle n'est pas transmise comme prop : si l'enfant a besoin de l'identifiant, passe-le aussi dans une prop (<CarteFiche key={f.id} fiche={f} />, où l'enfant lit fiche.id).

Quand chaque élément de la liste doit produire plusieurs balises sans parent, le fragment court <> ne peut pas recevoir de clé : utilise Fragment.

import { Fragment } from 'react';

<dl>
  {frais.map((f) => (
    <Fragment key={f.id}>
      <dt>{f.libelle}</dt>
      <dd>{formatMontant(f.montant)}</dd>
    </Fragment>
  ))}
</dl>

Afficher sous condition

Trois outils, selon la situation.

1. Un if avant le return, pour renvoyer un tout autre affichage. C'est le retour anticipé :

export function ListeFiches({ fiches }: ListeFichesProps) {
  if (fiches.length === 0) {
    return <p>Aucune fiche pour ce filtre.</p>;
  }
  return <ul>…</ul>;
}

2. Le ternaire condition ? a : b, pour choisir entre deux affichages au milieu du JSX :

<button type="submit" disabled={enCours}>
  {enCours ? 'Enregistrement…' : 'Ajouter le frais'}
</button>

3. condition && élément, pour afficher quelque chose ou rien :

{fiche.montantValide !== null && <p>Montant validé : {formatMontant(fiche.montantValide)}</p>}
{erreur && <p role="alert">{erreur}</p>}

a && b vaut b si a est « vrai », et a sinon. Quand a vaut false, null ou undefined, React n'affiche rien.

Pour ne rien afficher du tout, un composant renvoie null :

export function AlerteRetard({ jours }: { jours: number }) {
  if (jours <= 0) return null;
  return <p role="alert">Ta fiche est en retard de {jours} jour{jours > 1 ? 's' : ''}.</p>;
}

Le piège du zéro

function Alerte({ nbRefus }: { nbRefus: number }) {
  return <div>{nbRefus && <p>{nbRefus} frais refusés</p>}</div>;
}

Avec nbRefus = 3, le paragraphe s'affiche. Avec nbRefus = 0, on attend un écran vide… et l'écran affiche 0. 0 && … vaut 0, et React affiche les nombres. La condition à gauche de && doit être un vrai booléen :

{nbRefus > 0 && <p>{nbRefus} frais refusés</p>}
{fiches.length > 0 && <ListeFiches fiches={fiches} />}   // et pas {fiches.length && …}

Plusieurs cas : sortir la logique du JSX

Des ternaires imbriqués deviennent vite illisibles. Pour trois cas ou plus, prépare la valeur avant le return, ou utilise un objet de correspondance :

// Difficile à lire
{etat === 'CR' ? <BoutonCloturer /> : etat === 'CL' ? <p>En attente de validation</p> : etat === 'VA' ? <p>Validée</p> : null}

// Plus lisible : un objet qui associe chaque état à son affichage
const ACTIONS: Record<EtatFiche, ReactNode> = {
  CR: <BoutonCloturer />,
  CL: <p>En attente de validation</p>,
  VA: <p>Validée, en attente de paiement</p>,
  MP: <p>Mise en paiement</p>,
};

return <section>{ACTIONS[fiche.etat]}</section>;

Avec Record<EtatFiche, ReactNode>, TypeScript signale un état oublié : si l'API ajoute un état, la compilation te montre tous les endroits à compléter.

Un tableau de bord complet

Ce composant combine tout le chapitre : un retour anticipé, des valeurs dérivées, une liste triée avec clés et des conditions.

import type { FicheResume } from '../types';

export function TableauDeBord({ fiches }: { fiches: FicheResume[] }) {
  const enCours = fiches.filter((f) => f.etat === 'CR');
  const totalValide = fiches.reduce((somme, f) => somme + (f.montantValide ?? 0), 0);

  if (fiches.length === 0) return <p>Aucune fiche pour l'instant.</p>;

  return (
    <>
      <p>{enCours.length === 1 ? '1 fiche en cours' : `${enCours.length} fiches en cours`}</p>
      <p>Total validé : {totalValide.toFixed(2)} €</p>
      <ul>
        {fiches
          .toSorted((a, b) => b.mois.localeCompare(a.mois))
          .map((f) => (
            <li key={f.id}>{f.mois}{f.etat === 'CR' ? ' (à compléter)' : ''}</li>
          ))}
      </ul>
    </>
  );
}

Avec trois fiches, août (MP, 512,40 € validés), septembre (VA, 389,20 €) et octobre (CR, montant null), l'écran affiche « 1 fiche en cours », « Total validé : 901.60 € », puis la liste 2026-10 (à compléter), 2026-09, 2026-08. L'opérateur ?? remplace null par 0 dans la somme. (Le formatage toFixed(2) garde le point décimal ; dans l'application, formatMontant affiche « 901,60 € ».)

Exercices

import { formatDate, formatMontant } from '../format';
import type { Frais } from '../types';

export function TableFrais({ frais }: { frais: Frais[] }) {
  if (frais.length === 0) return <p>Aucun frais hors forfait pour ce mois.</p>;

  const total = frais.reduce((somme, f) => somme + f.montant, 0);

  return (
    <table>
      <caption>Frais hors forfait</caption>
      <thead>
        <tr><th scope="col">Date</th><th scope="col">Libellé</th><th scope="col">Montant</th></tr>
      </thead>
      <tbody>
        {frais.map((f) => (
          <tr key={f.id}>
            <td>{formatDate(f.date)}</td>
            <td>{f.libelle}</td>
            <td>{formatMontant(f.montant)}</td>
          </tr>
        ))}
      </tbody>
      <tfoot>
        <tr><th scope="row" colSpan={2}>Total</th><td>{formatMontant(total)}</td></tr>
      </tfoot>
    </table>
  );
}

function Resume({ fiches }: { fiches?: FicheResume[] }) {
  return (
    <section>
      {fiches.length && <h2>{fiches.length} fiches</h2>}
      <ul>{fiches.map((f) => <li>{f.mois}</li>)}</ul>
    </section>
  );
}

function Resume({ fiches }: { fiches?: FicheResume[] }) {
  if (fiches === undefined) return <p role="status">Chargement…</p>;
  if (fiches.length === 0) return <p>Aucune fiche.</p>;
  return (
    <section>
      <h2>{fiches.length} fiche{fiches.length > 1 ? 's' : ''}</h2>
      <ul>{fiches.map((f) => <li key={f.id}>{f.mois}</li>)}</ul>
    </section>
  );
}

const fichesAffichees = etat === '' ? fiches : fiches.filter((f) => f.etat === etat);