added "jeux" in json and fixed small bug

react-project/public/zelda.json

@@ -0,0 +1,37 @@
+[
+  {
+    "id": "1",
+    "titre": "Oracle of ages",
+    "console": "Game Boy Color",
+    "annee": "2001",
+    "Type": "2d"
+  },
+  {
+    "id": "2",
+    "titre": "Breath of the Wild",
+    "console": "Switch",
+    "annee": "2017",
+    "Type": "3d"
+  },
+  {
+    "id": "3",
+    "titre": "Majora's Mask",
+    "console": "N64",
+    "annee": "2000",
+    "Type": "3d"
+  },
+  {
+    "id": "4",
+    "titre": "Tears of the kingdom",
+    "console": "Switch",
+    "annee": "2023",
+    "Type": "3d"
+  },
+  {
+    "id": "5",
+    "titre": "Echoes of Wisdom",
+    "console": "Switch",
+    "annee": "2024",
+    "Type": "3d"
+  }
+]

react-project/src/App.jsx

@@ -1,47 +1,35 @@
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import Carte from "./components/Carte";
-import { useEffect } from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import "./App.css";
 
-const jeux = [
-  {
-    id: 1,
-    titre: "Oracle of ages",
-    console: "Game Boy Color",
-    annee: 2001,
-    Type: "2d",
-  },
-  {
-    id: 2,
-    titre: "Breath of the Wild",
-    console: "Switch",
-    annee: 2017,
-    Type: "3d",
-  },
-  { id: 3, titre: "Majora's Mask", console: "N64", annee: 2000, Type: "3d" },
-  {
-    id: 4,
-    titre: "Tears of the kingdom",
-    console: "Switch",
-    annee: 2023,
-    Type: "3d",
-  },
-];
-
 function App() {
   const [recherche, setRecherche] = useState("");
   const [total, setTotal] = useState(0);
+  const [jeux, setJeux] = useState([]); // au départ : liste vide
+  const [chargement, setChargement] = useState(true);
 
   const filtres = jeux.filter((j) =>
     j.titre.toLowerCase().includes(recherche.toLowerCase()),
   );
 
   useEffect(() => {
-    document.title = `${jeux.length} jeux Zelda`;
+    fetch("/zelda.json")
+      .then((r) => r.json())
+      .then((data) => {
+        setJeux(data);
+
+        setChargement(false);
+      });
   }, []);
 
+  useEffect(() => {
+    document.title = `${jeux.length} jeux Zelda`;
+  }, [jeux]);
+
+  if (chargement) return <p>Chargement…</p>;
+
   return (
     <>
       <Header />