diff --git a/CORRECTION_boss_L.md b/CORRECTION_boss_L.md new file mode 100644 index 0000000..7290895 --- /dev/null +++ b/CORRECTION_boss_L.md @@ -0,0 +1,53 @@ +# 🔧 Correction — le boss (Module L) est Ă  moitiĂ© branchĂ© + +Beau boulot : `App` tient bien `trilogies` et `likes`, les passe aux routes, `Details` retrouve la trilogie et affiche ses likes, et le bouton « au hasard » marche. Il reste **un fil dĂ©branchĂ©** qui casse tout le reste. + +## 🐛 Le vrai bug : `Accueil` ignore les props et garde sa propre liste + +Dans `App.jsx` tu passes bien la liste : +```jsx + +``` + +Mais dans `Accueil.jsx`, regarde les deux premiĂšres lignes : +```jsx +function Accueil({ likes, setLikes }) { // ❌ trilogies / setTrilogies PAS rĂ©cupĂ©rĂ©s + const [trilogies, setTrilogies] = useState(initialData); // ❌ une 2e liste, locale +``` + +Du coup il existe **deux listes diffĂ©rentes** : +- celle de `App` (que voit `Details`), +- celle de `Accueil` (sa copie locale, oĂč vont tes ajouts). + +Quand tu ajoutes une trilogie, tu remplis **la liste locale d'`Accueil`** → elle s'affiche sur l'accueil, mais **`App` n'en sait rien**. Donc `Details` (qui lit la liste d'`App`) ne la trouve pas → « Introuvable ». Pareil, le bouton « au hasard » pioche dans la liste locale et t'envoie vers un id que `Details` ne connaĂźt pas. + +> đŸ§© La rĂšgle : si une donnĂ©e vient des **props**, on ne la recrĂ©e pas en `useState` Ă  cĂŽtĂ©. Sinon la prop est **masquĂ©e** (« shadowing ») et les deux copies divergent. + +## ✅ La correction (3 changements dans `Accueil.jsx`) + +1. **RĂ©cupĂšre** `trilogies` et `setTrilogies` dans les props : +```jsx +function Accueil({ trilogies, setTrilogies, likes, setLikes }) { +``` + +2. **Supprime** la ligne qui recrĂ©e la liste en local : +```jsx +const [trilogies, setTrilogies] = useState(initialData); // ❌ Ă  enlever +``` + +3. **Supprime** l'import devenu inutile (c'est `App` qui connaĂźt `initialData`, plus `Accueil`) : +```jsx +import { initialData } from "../data"; // ❌ Ă  enlever +``` + +Tout le reste de `Accueil` (`ajouter`, `liker`, `affichees`, le `.map`) marche **sans changement** : il utilisait dĂ©jĂ  `trilogies` / `setTrilogies`, qui viennent maintenant des props. + +**Test :** ajoute une trilogie → clique « Voir les dĂ©tails » dessus → **elle s'affiche** (au lieu de « Introuvable »). Le bouton « au hasard » peut aussi tomber dessus et l'afficher. + +## đŸ§č Pendant qu'on y est — 3 petits restes Ă  nettoyer + +1. `console.log("test")` en haut d'`Accueil` → on enlĂšve les logs de debug. +2. Le `` vide juste avant le `` → inutile quand il n'y a qu'un Ă©lĂ©ment, tu peux laisser le `