Correction services: page d'accueil blanche car il manque le return devant le JSX dans Accueil()

2026-06-25 15:51:50 +02:00
parent 8d2ca369fc
commit 0bae7d1045
1 changed files with 75 additions and 0 deletions
@@ -0,0 +1,75 @@
+# 🔧 Correction — page d'accueil blanche : il manque le `return`
+
+Ton routeur est **bien configuré** maintenant (un seul `render`, `BrowserRouter` dans `main.jsx`, `Routes` dans `App.jsx`). Mais la page `/` est **vide**. La raison est dans `pages/Accueil.jsx`, et c'est une erreur très classique.
+
+---
+
+## 🔍 Le bug : ton composant ne **renvoie** rien
+
+Regarde la fin de `Accueil` :
+
+```jsx
+function Accueil() {
+  // ... tes useState, ajouter, liker, total ...
+
+  <div className="body">          // ❌ ce JSX n'est PAS renvoyé
+    <Header />
+    ...
+    <Footer />
+  </div>;                          // ← juste une instruction, suivie d'un point-virgule
+}
+```
+
+Tu as écrit tout ton JSX… mais **sans `return` devant**. Du coup, JavaScript **calcule** ce `<div>` puis le **jette** à la poubelle, et la fonction `Accueil` ne renvoie **rien** (`undefined`). React affiche donc… **rien** → page blanche.
+
+> 🧠 **À retenir :** un composant React **doit `return`** le JSX qu'il veut afficher. Sans `return`, le composant ne montre rien. C'est différent d'un `if (...) return <p>Chargement…</p>` que tu fais plus haut : là tu renvoies bien quelque chose.
+
+---
+
+## ✅ La correction : ajouter `return (` … `)`
+
+```jsx
+function Accueil() {
+  // ... tes useState, ajouter, liker, total ...
+
+  return (                          // 👈 AJOUTE "return ("
+    <div className="body">
+      <Header />
+      <select value={tri} onChange={(e) => setTri(e.target.value)}>
+        <option value="nom">Nom (A→Z)</option>
+        <option value="likes">Plus likées</option>
+      </select>
+      <form onSubmit={ajouter}>
+        {/* ... tes inputs + bouton Ajouter ... */}
+      </form>
+      <input type="search" placeholder="Rechercher une trilogie…"
+             value={recherche} onChange={(e) => setRecherche(e.target.value)} />
+      <p>👍 Total de likes : {total}</p>
+      {affichees.length === 0 && <p>Aucune trilogie trouvée</p>}
+      {affichees.map((trilo) => (
+        <Carte key={trilo.id} titre={trilo.nom} niveaux={trilo.niveaux}
+               likes={likes[trilo.id] || 0} onLike={() => liker(trilo.id)} />
+      ))}
+      <Footer />
+    </div>
+  );                                // 👈 ET la parenthèse fermante
+}
+```
+
+**✅ Test :** va sur `/` → ta page d'accueil (cartes + recherche + tri + formulaire + total) **s'affiche** enfin.
+
+---
+
+## 🧹 Pendant que tu y es (optionnel)
+
+- Enlève le `console.log("test")` au début de `Accueil` (c'était pour déboguer).
+- Le `<>…</>` autour du **seul** `<select>` ne sert à rien (le fragment ne sert que pour grouper **plusieurs** éléments) → tu peux l'enlever.
+
+---
+
+## ✅ Récap
+- [ ] Mettre `return (` devant `<div className="body">` et `)` après `</div>`
+- [ ] Vérifier que `/` affiche bien ta liste
+- [ ] (Optionnel) virer le `console.log` et le fragment inutile
+
+> 💬 La phrase à garder : **pas de `return`, pas d'affichage.** Un composant qui « calcule » du JSX sans le `return`er ne montre rien.