added "jeux" in json and fixed small bug

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 />