like total

mon-projet/src/App.jsx

@@ -32,21 +32,15 @@ const trilogies = [
 ];
 
 function App() {
+  const [likes, setLikes] = useState(0);
   const [recherche, setRecherche] = useState("");
   const [total, setTotal] = useState(0);
   const filtrees = trilogies.filter((t) =>
     t.nom.toLowerCase().includes(recherche.toLowerCase()),
   );
+
   return (
     <div className="body">
-      <p>👍 Total de likes : {total}</p>
-      {trilogies.map((trilo) => (
-        <Carte
-          key={trilo.id}
-          nom={trilo.nom}
-          onLike={() => setTotal((t) => t + 1)} // 👈 on passe une FONCTION en prop
-        />
-      ))}
       <Header />
       <input
         type="search"
@@ -56,9 +50,14 @@ function App() {
       />
 
       {filtrees.length === 0 && <p>Aucune trilogie trouvée </p>}
-
+      <p>👍 Total de likes : {total}</p>
       {filtrees.map((trilo) => (
-        <Carte key={trilo.id} titre={trilo.nom} niveaux={trilo.niveaux} />
+        <Carte
+          key={trilo.id}
+          titre={trilo.nom}
+          niveaux={trilo.niveaux}
+          onLike={() => setTotal((t) => t + 1)}
+        />
       ))}
       <Footer />
     </div>

mon-projet/src/components/carte.jsx

@@ -1,11 +1,20 @@
+import { useState } from "react";
 function Carte(props) {
+  const [likes, setLikes] = useState(0);
   return (
     <div className="carte">
       <h2>{props.titre}</h2>
       <p>{props.niveaux}</p>
       <p>{props.createur}</p>
       <h2>{props.nom}</h2>
-      <button onClick={props.onLike}>❤️ J'aime</button>
+      <button
+        onClick={() => {
+          setLikes(likes + 1);
+          props.onLike();
+        }}
+      >
+        ❤️ {likes}
+      </button>
     </div>
   );
 }