diff --git a/react-project/src/App.jsx b/react-project/src/App.jsx index 6220cde..18f4b0b 100644 --- a/react-project/src/App.jsx +++ b/react-project/src/App.jsx @@ -7,7 +7,7 @@ import "./App.css"; function App() { const [recherche, setRecherche] = useState(""); const [total, setTotal] = useState(0); - const [jeux, setJeux] = useState([]); // au départ : liste vide + const [jeux, setJeux] = useState([]); const [chargement, setChargement] = useState(true); const filtres = jeux.filter((j) => @@ -19,15 +19,11 @@ function App() { .then((r) => r.json()) .then((data) => { setJeux(data); - + document.title = `${data.length} jeux Zelda`; setChargement(false); }); }, []); - useEffect(() => { - document.title = `${jeux.length} jeux Zelda`; - }, [jeux]); - if (chargement) return
Chargement…
; return ( diff --git a/react-project/src/components/BarreRecherche.jsx b/react-project/src/components/BarreRecherche.jsx new file mode 100644 index 0000000..9b48202 --- /dev/null +++ b/react-project/src/components/BarreRecherche.jsx @@ -0,0 +1,39 @@ +import { useState, useEffect } from "react"; +const [jeux, setJeux] = useState([]); +const [recherche, setRecherche] = useState(""); + +useEffect(() => { + document.title = `${jeux.length} jeux Zelda`; +}, [jeux]); + +const filtres = jeux.filter((j) => + j.titre.toLowerCase().includes(recherche.toLowerCase()), +); + const [total, setTotal] = useState(0); + +function BarreRecherche() { + return ( + setRecherche(e.target.value)} + /> + + {filtres.length === 0 &&Aucun jeu trouvé 😕
} + + {filtres.map((jeu) => ( +Total de likes : {total}
+ ); +} + +export default BarreRecherche;