Correction contact: variable d'etat nommee console (mot reserve), prop BarreRecherche value->valeur, et le tri (filtrer puis trier, afficher affiches)

2026-06-25 14:05:05 +02:00
parent bcf4c96e3b
commit eb52dfb63f
1 changed files with 98 additions and 0 deletions
@@ -0,0 +1,98 @@
+# 🔧 Correction — le tri + 2 bugs discrets
+
+Ton formulaire d'ajout est **bon** (immutabilité avec `[...jeux, nouveau]`, champs vidés, `preventDefault`) 👏. Trois choses à régler : le **tri**, et deux petits bugs que tu n'as peut-être pas repérés.
+
+---
+
+## 🐛 Bug 1 — tu as nommé une variable `console` (à éviter absolument)
+
+```jsx
+const [console, setConsole] = useState("");
+```
+
+`console`, c'est **déjà** un objet de JavaScript (celui de `console.log` !). En créant une variable qui s'appelle `console`, tu **l'écrases** dans tout ton composant : si un jour tu écris `console.log(...)` dans `App`, tu auras `console.log is not a function` (car `console` vaut maintenant `""`).
+
+### ✅ Renomme-la
+```jsx
+const [plateforme, setPlateforme] = useState("");
+```
+…et adapte partout où tu l'utilises (`value={plateforme}`, `setPlateforme(...)`, et `console: plateforme` dans l'objet `nouveau`).
+
+> 💡 **À retenir :** évite de nommer tes variables comme des mots **déjà pris** par JavaScript : `console`, `document`, `window`, `event`… Tu risques d'écraser un outil du langage sans t'en rendre compte.
+
+---
+
+## 🐛 Bug 2 — `BarreRecherche` ne reçoit pas la bonne prop
+
+Ton composant attend une prop **`valeur`** :
+```jsx
+function BarreRecherche({ valeur, onChange }) { ... value={valeur} ... }
+```
+Mais dans `App` tu lui passes **`value`** :
+```jsx
+<BarreRecherche value={recherche} onChange={...} />   // ❌ "value", pas "valeur"
+```
+Du coup, à l'intérieur, `valeur` est `undefined` → le champ n'est plus **contrôlé** par ton état.
+
+### ✅ Mets le même nom des deux côtés
+```jsx
+<BarreRecherche valeur={recherche} onChange={(e) => setRecherche(e.target.value)} />
+```
+
+> 🧩 **À retenir :** une prop, c'est comme une étiquette : le nom que tu mets dans `App` (`valeur=`) doit être **exactement** celui que le composant lit (`{ valeur }`). Sinon, le composant reçoit `undefined`.
+
+---
+
+## 🔀 Le tri (Module J) — comment le faire marcher
+
+Pour trier, il te faut **trois** choses, et bien les **enchaîner** : filtrer → trier → afficher.
+
+### Étape 1 — un état pour le critère de tri
+```jsx
+const [tri, setTri] = useState("titre");
+```
+
+### Étape 2 — un `<select>` contrôlé (à côté de la barre de recherche, pas « dans » le formulaire d'ajout)
+```jsx
+<select value={tri} onChange={(e) => setTri(e.target.value)}>
+  <option value="titre">Titre (A→Z)</option>
+  <option value="annee">Année</option>
+</select>
+```
+
+### Étape 3 — filtrer PUIS trier, sur la même liste
+```jsx
+const affiches = [...jeux]
+  .filter((j) => j.titre.toLowerCase().includes(recherche.toLowerCase()))
+  .sort((a, b) => {
+    if (tri === "titre") return a.titre.localeCompare(b.titre);
+    if (tri === "annee") return a.annee - b.annee;
+    return 0;
+  });
+```
+
+### Étape 4 — afficher **`affiches`** (et non `filtres`)
+```jsx
+{affiches.length === 0 && <p>Aucun jeu trouvé 😕</p>}
+{affiches.map((jeu) => (
+  <Carte key={jeu.id} gameId={jeu.id} titre={jeu.titre} console={jeu.console}
+         annee={jeu.annee} Type={jeu.Type} onLike={() => setTotal((t) => t + 1)} />
+))}
+```
+Tu peux **supprimer** l'ancien `const filtres = ...` : `affiches` fait déjà le filtre **et** le tri.
+
+> 🧠 **Le piège classique du tri** (Guillaume est tombé dedans aussi !) : on calcule une liste triée mais on **affiche l'autre**. La règle : **on affiche la liste qu'on a vraiment transformée.** Ici, `affiches` fait filtre + tri, donc on `.map()` `affiches`.
+
+> 🔎 Le tri **n'a rien à faire « dans le formulaire »** : le `<select>` est un élément à part (au-dessus de la liste), pas dans le `<form>` d'ajout. Garde-les séparés.
+
+**✅ Test :** change le `<select>` → l'ordre des cartes change ; combiné avec la recherche, les deux marchent ensemble.
+
+---
+
+## ✅ Récap
+- [ ] Renommer l'état `console` → `plateforme` (mot réservé !)
+- [ ] `BarreRecherche` : passer `valeur=` (pas `value=`)
+- [ ] Tri : état `tri` + `<select>` contrôlé + liste **filtrée puis triée** (`affiches`)
+- [ ] Afficher **`affiches`** dans le `.map()`, supprimer l'ancien `filtres`
+
+> 💬 À garder : un nom de variable **jamais** pris par JS ; une prop au **même nom** des deux côtés ; et **on affiche la liste qu'on a transformée**.