Accueil / Articles / Affichage conditionnel et de listes avec React sans outils complexes

reactjsxrenderinglistsfrontend

Affichage conditionnel et de listes avec React sans outils complexes

Branches explicites, clés de liste stables et modèles qui maintiennent la logique UI conditionnelle lisible lorsque les composants dépassent le stade d’exemples simplistes dans des applications React en production.

1963 mots

Ce guide reconstruit un parcours opérationnel pour : le rendu conditionnel et le rendu de listes en React — ainsi que la véritable nature du paramètre key. L’accent est mis sur les contrats, les vérifications et le code que l’on peut intégrer directement dans un dépôt sans devoir deviner son intention. Pour une vue d’ensemble, définissez les entrées, le responsable de l’étape et les critères d’achèvement avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans avoir à deviner l’état caché. Enregistrez les temps d’exécution et les coûts à côté des résultats fonctionnels. Une visibilité précoce permet d’éviter des factures inattendues dans les environnements partagés.

Rendu conditionnel — Afficher ou ne pas afficher

Pour le rendu conditionnel — pour déterminer s’afficher ou non, il faut définir les entrées, le responsable de l’étape et les critères de sortie avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Conservez la configuration en dehors du code de l’application. Les fichiers d’environnement, les bases de données secrètes et les flags fonctionnels doivent être regroupés en un seul endroit que les opérateurs puissent auditer. Placez les types à côté des composants et restreignez le nombre de propriétés. Un grand nombre de propriétés devient la dette que TypeScript est censé éviter.

Méthode 1 — Branchement avec if, et retour de null lorsqu’aucun élément n’est affiché

Pour l’approche 1 — Branchement avec if, et retour de null lorsqu’aucun élément n’est dessiné, il faut définir les entrées, le responsable de l’étape ainsi que les critères d’arrêt avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Documentez conjointement le parcours normal et le parcours de récupération. Les tentatives répétées ainsi que la gestion des messages non livrés font partie intégrante du produit. Colocalisez les types avec les composants et restreignez le nombre de propriétés. Un grand nombre de propriétés devient la dette que TypeScript est censé éviter.

type Props = { isInStock: boolean };

function StockBadge({ isInStock }: Props) {
  if (!isInStock) {
    return null; // out of stock — draw nothing
  }
  return <span className="badge">In stock</span>;
}

Approche 2 — L’un ou l’autre avec l’opérateur ternaire

Pour l’Approche 2 — L’une des deux avec l’opérateur ternaire, définissez les entrées, le responsable de l’étape et les critères de sortie avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Préférez des unités petites et testables aux scripts volumineux. Lorsqu’une étape échoue, l’échec doit indiquer une seule responsabilité. Colocalisez les types avec les composants et restreignez le nombre de propriétés. Un grand nombre de propriétés devient la dette que TypeScript est censé éviter. Pour l’Approche 2 — L’une des deux avec l’opérateur ternaire, définissez les entrées, le responsable de l’étape et les critères de sortie avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Enregistrez les temps d’exécution et les coûts à côté des résultats fonctionnels. Une visibilité précoce évite des factures inattendues dans les environnements partagés.

function StockBadge({ isInStock }: Props) {
  return (
    <span className="badge">
      {isInStock ? 'In stock' : 'Out of stock'}
    </span>
  );
}

Méthode 3 — “Uniquement lorsque” avec &&

Pour la méthode 3 — “Uniquement lorsque” avec &&, il faut définir les entrées, le responsable de l’étape et les critères d’arrêt avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Conservez la configuration en dehors du code de l’application. Les fichiers d’environnement, les bases de données secrètes et les indicateurs fonctionnels doivent être regroupés en un seul endroit que les opérateurs peuvent auditer. Préférez le rendu conditionnel explicite aux raccourcis astucieux qui cachent des bugs en production.

function Cart({ count }: { count: number }) {
  return (
    <div>
      <h2>Cart</h2>
      {count > 0 && <p>Items in cart: {count}</p>}
    </div>
  );
}

Le piège le plus courant avec && — le nombre 0

Pour le piège le plus courant lié au && — le chiffre 0, définissez les entrées, l’auteur de l’étape et les critères de sortie avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Documentez à la fois le parcours normal et les scénarios de récupération. Les tentatives répétées et la gestion des messages non livrés font partie intégrante du produit. Préférez un affichage conditionnel explicite aux raccourcis astucieux qui cachent des bugs en production.

function Cart({ count }: { count: number }) {
  return (
    <div>
      <h2>Cart</h2>
      {/* 🔴 trap: if count is 0, "0" shows up on screen */}
      {count && <p>Items in cart: {count}</p>}
    </div>
  );
}

function App() {
  return (
    <>
      <Cart count={0} />
      <Cart count={10} />
    </>
  );
}

export default App;

// ✅ count > 0 is true/false, so it's safe
{count > 0 && <p>Items in cart: {count}</p>}

Affichage de listes — Afficher un tableau en boucle

Pour l’affichage de listes — dessiner un tableau en boucle, définissez les entrées, le responsable de l’étape et les critères d’arrêt avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Préférez des unités petites et testables aux scripts complexes. Lorsqu’une étape échoue, l’échec doit indiquer une seule responsabilité. Préférez un affichage conditionnel explicite aux raccourcis astucieux qui cachent des bugs en production. Pour l’affichage de listes — dessiner un tableau en boucle, définissez les entrées, le responsable de l’étape et les critères d’arrêt avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Enregistrez les temps d’exécution et les coûts à côté des résultats fonctionnels. Une visibilité précoce évite des factures inattendues dans les environnements partagés.

type Product = {
  id: number;
  name: string;
  price: number;
};

const products: Product[] = [
  { id: 1, name: 'Mechanical Keyboard', price: 89000 },
  { id: 2, name: 'Wireless Mouse', price: 45000 },
  { id: 3, name: 'USB Hub', price: 23000 },
];

function ProductList() {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} — {product.price.toLocaleString()} won
        </li>
      ))}
    </ul>
  );
}

key — l’élément de nom que React utilise pour distinguer les éléments

Pour les clés — c’est-à-dire les étiquettes que React utilise pour distinguer les éléments — définissez les entrées, le responsable de l’étape ainsi que les critères d’achèvement avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Conservez la configuration en dehors du code de l’application. Les fichiers d’environnement, les bases de données secrètes et les indicateurs fonctionnels doivent être regroupés en un seul endroit que les opérateurs puissent auditer. Les listes de clés doivent correspondre à des identifiants commerciaux stables, et non à des indices d’array, surtout lorsque l’ordre peut varier.

Warning: Each child in a list should have a unique "key" prop.

Les clés doivent être « stables et uniques »

Pour que les clés soient « stables et uniques », définissez les entrées, le responsable de l’étape ainsi que les critères de fin avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Documentez conjointement le parcours normal et le parcours de récupération. Les tentatives répétées ainsi que la gestion des messages non livrés font partie du produit. Les listes de clés doivent correspondre à des identifiants commerciaux stables, et non à des indices d’array, lorsque l’ordre peut changer.

<li key={product.id}>   // ✅ each product's unique id — stable

Piège — Ne pas utiliser l’indice d’array comme clé

Pour Trap : ne pas utiliser l’index de tableau comme clé ; définir les entrées, le responsable de l’étape et les critères de sortie avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Préférer des unités petites et testables aux scripts volumineux. Lorsqu’une étape échoue, l’échec doit indiquer une seule responsabilité. Les clés de liste doivent être des identifiants commerciaux stables, et non des indices de tableau, lorsque l’ordre peut changer. Pour Trap : ne pas utiliser l’index de tableau comme clé ; définir les entrées, le responsable de l’étape et les critères de sortie avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Enregistrer les temps d’exécution et les coûts à côté des résultats fonctionnels. Une visibilité précoce permet d’éviter des factures inattendues dans les environnements partagés.

// 🔴 common but dangerous pattern
{products.map((product, index) => (
  <li key={index}>{product.name}</li>
))}

Assemblage — Conditionnel + Liste

Pour le mettre en place — conditions + liste, définissez les entrées, le responsable de l’étape et les critères de sortie avant de modifier le code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Conservez la configuration en dehors du code de l’application. Les fichiers d’environnement, les bases de données secrètes et les flags fonctionnels doivent être regroupés en un seul endroit que les opérateurs peuvent auditer. Colocalisez les types avec les composants et restreignez le nombre de propriétés. Un grand nombre de propriétés devient la dette que TypeScript est censé éviter.

type Product = {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
};

function ProductList({ products }: { products: Product[] }) {
  // when the list is empty — conditional rendering
  if (products.length === 0) {
    return <p>No products to display.</p>;
  }

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name} — {product.price.toLocaleString()} won
          {/* badge only when out of stock — && (safe since the left side is boolean) */}
          {!product.inStock && <span className="badge"> (Out of stock)</span>}
        </li>
      ))}
    </ul>
  );
}

// dummy data — swap in an empty array [] to see the "No products" message
const products: Product[] = [
  { id: 1, name: 'Mechanical Keyboard', price: 89000, inStock: true },
  { id: 2, name: 'Wireless Mouse', price: 42000, inStock: false },
  { id: 3, name: 'USB-C Hub', price: 35000, inStock: true },
];

function App() {
  return <ProductList products={products} />;
}

En résumé

Pour conclure, définissez les entrées, le responsable de l’étape et les critères d’arrêt avant de modifier du code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Documentez ensemble le parcours normal et le parcours de récupération. Les tentatives répétées et la gestion des messages non livrés font partie du produit. Colocalisez les types avec les composants et restreignez le nombre de propriétés. Un grand nombre de propriétés devient la dette que TypeScript était censé éviter.

Références

À titre de référence, définissez les entrées, le responsable de l’étape et les critères d’arrêt avant de modifier du code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Préférez des unités petites et testables aux scripts volumineux. Lorsqu’une étape échoue, l’échec doit correspondre à une seule responsabilité. Colocalisez les types avec les composants et restez limité dans la définition des propriétés. Des ensembles de propriétés trop larges génèrent les dettes que TypeScript est censé éviter. À titre de référence, définissez les entrées, le responsable de l’étape et les critères d’arrêt avant de modifier du code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché. Enregistrez les temps d’exécution et les coûts à côté des résultats fonctionnels. Une visibilité précoce permet d’éviter des factures inattendues dans les environnements partagés.

Liste de contrôle opérationnelle

Pour la liste de contrôle opérationnelle, définissez les entrées, le responsable de chaque étape et les critères d’achèvement avant de modifier du code. Les opérateurs doivent pouvoir relancer l’étape à partir d’un point de contrôle connu sans deviner l’état caché.

Considérez cette étape comme un contrat entre les entrées et les sorties validées. Nommez les artefacts, définissez des vérifications de succès et refusez toute exécution partielle silencieuse.

Préférez un affichage conditionnel explicite aux raccourcis ingénieux qui cachent des bugs en production.

Préférez une fiabilité banale à des démonstrations originales mais éphémères.

Enregistrez les temps d’exécution et les coûts aux côtés des résultats fonctionnels. Une visibilité précoce évite les factures inattendues dans des environnements partagés.

Préférez un affichage conditionnel explicite aux raccourcis ingénieux qui cachent des bugs en production.

Au préalable de promouvoir la pile logicielle, figez les versions, créez une transcription d’ référence pour le chemin critique, et vérifiez les étapes de rollback. Les environnements partagés nécessitent des limites de débit, des contrôles d’attribution, ainsi qu’un responsable clair pour la rotation des secrets.

Tous les articlesEnvoyer le brief