debug like

mon-projet/src/App.jsx

@@ -3,7 +3,6 @@ import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Carte from "./components/Carte";
 import { useState } from "react";
-import { useEffect } from "react";
 const trilogies = [
   {
     id: 1,
@@ -33,12 +32,14 @@ const trilogies = [
 ];
 
 function App() {
-  const [likes, setLikes] = useState({ 1: 3, 4: 1 });
+  const [likes, setLikes] = useState({}); // {} au départ (pas {1:3, 4:1})
   const [recherche, setRecherche] = useState("");
-  const [total, setTotal] = useState(0);
-  useEffect(() => {
-    document.title = `${trilogies.length} trilogies cultes`;
-  }, []);
+  function liker(id) {
+    setLikes((prev) => ({ ...prev, [id]: (prev[id] || 0) + 1 }));
+  }
+
+  const total = Object.values(likes).reduce((s, n) => s + n, 0);
+
   const filtrees = trilogies.filter((t) =>
     t.nom.toLowerCase().includes(recherche.toLowerCase()),
   );
@@ -52,16 +53,16 @@ function App() {
         value={recherche}
         onChange={(e) => setRecherche(e.target.value)}
       />
-
-      {filtrees.length === 0 && <p>Aucune trilogie trouvée </p>}
       <p>👍 Total de likes : {total}</p>
+      {filtrees.length === 0 && <p>Aucune trilogie trouvée</p>}
+
       {filtrees.map((trilo) => (
         <Carte
           key={trilo.id}
           titre={trilo.nom}
           niveaux={trilo.niveaux}
-          onLike={() => setTotal((t) => t + 1)}
-          likes={likes[trilo.id] || 0}
+          likes={likes[trilo.id] || 0} // SON nombre de likes
+          onLike={() => liker(trilo.id)} // incrémente SON like
         />
       ))}
       <Footer />

mon-projet/src/components/carte.jsx

@@ -1,19 +1,9 @@
-import { useState } from "react";
 function Carte(props) {
   return (
     <div className="carte">
       <h2>{props.titre}</h2>
       <p>{props.niveaux}</p>
-      <p>{props.createur}</p>
-      <h2>{props.nom}</h2>
-      <button
-        onClick={() => {
-          setLikes(likes + 1);
-          props.onLike();
-        }
-      >
-        ❤️ {likes}
-      </button>
+      <button onClick={props.onLike}>❤️ {props.likes}</button>
     </div>
   );
 }