08 — Listes et clés

🔍 Rendre une liste

Pour afficher une liste d'éléments, on utilise .map() dans le JSX :

function ListeSimple() {
    const fruits = ['Pomme', 'Poire', 'Orange', 'Banane'];

    return (
        <ul>
            {fruits.map((fruit, index) => (
                <li key={index}>{fruit}</li>
            ))}
        </ul>
    );
}

🔑 L'attribut key

Chaque élément dans une liste doit avoir une prop key unique. C'est ce qui permet à React d'identifier quel élément a changé, a été ajouté ou supprimé.

// ✅ Avec un ID unique (recommandé)
{utilisateurs.map(user => (
    <CarteUser key={user.id} nom={user.nom} />
))}

// ⚠️ Avec l'index (si pas d'ID disponible)
{fruits.map((fruit, index) => (
    <li key={index}>{fruit}</li>
))}

Règles des keys :

• Doit être unique parmi les frères et sœurs (pas globalement).
• Doit être stable (ne pas changer entre les rendus).
• N'est pas une prop — elle n'est pas accessible dans le composant enfant.
• Se place sur l'élément le plus extérieur retourné par le .map().

📦 Listes d'objets

function ListeUtilisateurs() {
    const utilisateurs = [
        { id: 1, nom: 'Alice', age: 30 },
        { id: 2, nom: 'Bob', age: 25 },
        { id: 3, nom: 'Clara', age: 28 }
    ];

    return (
        <div>
            {utilisateurs.map(user => (
                <div key={user.id}>
                    <h3>{user.nom}</h3>
                    <p>Âge : {user.age}</p>
                </div>
            ))}
        </div>
    );
}

🔀 Filtrer une liste

function ListeFiltree() {
    const produits = [
        { id: 1, nom: 'Laptop', prix: 999, enStock: true },
        { id: 2, nom: 'Souris', prix: 29, enStock: false },
        { id: 3, nom: 'Clavier', prix: 79, enStock: true },
    ];

    // On peut chaîner filter() + map()
    return (
        <ul>
            {produits
                .filter(p => p.enStock)
                .map(p => (
                    <li key={p.id}>{p.nom} — {p.prix}€</li>
                ))
            }
        </ul>
    );
}

🏗️ Extraire en composant

// Composant pour un seul item
function ProduitItem({ produit }) {
    return (
        <tr>
            <td>{produit.nom}</td>
            <td>{produit.prix}€</td>
            <td>{produit.enStock ? '✅' : '❌'}</td>
        </tr>
    );
}

// Composant liste
function TableauProduits({ produits }) {
    return (
        <table>
            <thead>
                <tr><th>Nom</th><th>Prix</th><th>Stock</th></tr>
            </thead>
            <tbody>
                {produits.map(p => (
                    <ProduitItem key={p.id} produit={p} />
                ))}
            </tbody>
        </table>
    );
}

🚀 Démo interactive

▼ Liste dynamique avec ajout, suppression et filtrage

📝 Résumé