Exercices Listes & Keys
10 exercices pour maîtriser map(), key, filter(), sort() et les listes dynamiques.
Rendre une liste avec .map()
Tâche : Affichez un tableau de fruits dans une <ul> avec .map() et la prop key.
key stable (pas l'index)
Tâche : Utilisez p.id comme key — pas l'index du tableau — pour une liste de produits.
Filtrer avec .filter()
Tâche : Créez une barre de recherche qui filtre la liste d'utilisateurs avec .filter() en temps réel.
Trier avec .sort()
Tâche : Ajoutez un <select> pour trier la liste par nom ou par âge — utilisez [...arr].sort() pour ne pas muter le state.
Supprimer un élément
Tâche : Ajoutez un bouton "×" sur chaque élément qui le supprime avec .filter(i => i.id !== id).
Modifier un élément
Tâche : Implémentez un toggle qui coche/décoche chaque tâche avec .map(t => t.id === id ? {{ ...t, done: !t.done }} : t).
map() + filter() combinés
Tâche : Filtrez la liste par technologie ET par statut (actifs seulement), puis affichez avec .map() + key.
Liste imbriquée
Tâche : Affichez des catégories avec leurs items imbriqués — .map() externe pour les catégories, .map() interne pour les items.
Filtrage + tri combinés
Tâche : Chaînez .filter() + .sort() sur un tableau de cours, avec deux contrôles indépendants dans le state.
Catalogue complet
Tâche finale : Catalogue de produits avec recherche, filtre catégorie, filtre disponibilité, panier — filter() + map() + key + useState.
Passer le QCM R06