Scribd
Upload
17 views3 pages

Playlist Spotify

Uploaded by

abdilah malih
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views3 pages

Playlist Spotify

Uploaded by

abdilah malih
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

1====>

import Link from "react-router-dom";


export function Navbar(){
return(
<navbar>
<h2>Foot-Vote</h2>
<Link to="/" >Acceuil<Link/>
<Link to="/equipes" >Equipe<Link/>
<Link to="/Jouereus" >Jouereus<Link/>
</navbar>
)
}

app:
<Routes>
<Route link="/equipes" element={equipes}><Route/>
<Route link="/Jouereus" element={Jouereus}><Route/>
<Route link="/" element={Acceuil}><Route/>
<Routes/>

2====>
import axios from "axios";
import {useEffect,useState} from "react-dom";
import Navbar from "./Navbar";
import {Route,Routes,BrowserRouter} from "react-router-dom";

export function app(){


useEffect(()=>{
const data =
axios.get("https://localhost:8000/joueurs").then((res)=>res.data);
},[])
const [dataJ,setDtaJ] = useState(data);
return(
<>
<Navbar />
<BrowserRouter>
<Routes>
<Route link="/equipes" element={equipes}><Route/>
<Route link="/Jouereus" element={Jouereus}><Route/>
<Route link="/Jouereus/Jouer/:id" element={DetailJouer}><Route/>
<Route link="/" element={Acceuil}><Route/>
<Route link="*" element={Erreur}><Route/>
<Route link="/Modifie/:id" element={Modifie}><Route/>
<Routes/>
<BrowserRouter/>
</>
)

3=====>

import {useState} from "react-router-dom";


import Data from "./app";

export function Jouers(){


const [TermCherche,setTermCherche] = useState("");
const [Data,setData] = useState(Date);
function ClickDelete(id){
setData(Data.filte((e)=>return e.id !== id));
}
function HandleClicResersch (){
setData(Data.filter((e)=> return
e.nom.toLowerCase().includes(TermCherche.toLoweCase())));
}
return(
<>
<h2>Jouers</h2>
<form Onsubmit={HandleClicResersch}>
<label>Chercher par equepe :</label>
<input type="text"
onChanege={(e)=>setTermCherche(e.target.value)} />
<input type="submit" value="Rechercher" />
</form>
{data.length !== 0 ? data.map((e)=>(
<div className="carte" >
<img src={e.image} />
<label>Nom :</label>{e.nom}
<label>prenom :</label>{e.prenom}
<label>Equipe :</label>{e.Equipe}
<Link to=`/Jouers/jouer/${e.id}`><Button className="btn btn-
dark">Detail</Button></Link>
<Link to=`/Modifie/${e.id}`><Button className="btn btn-
dark">Modiifie</Button></Link>
<Button className="btn btn-danger"
onClick={ClickDelete(e.id)}>Suppimer</Button>
)

4========>

import Data from "./App";


import {useParam} from "react-router-dom";

export function Jouer(){


const id = useParam("id");
const dataFiltre = Data.find((e)=> return e.id === id);
return(
<>
<img scr={dataFilter.img} />
<div> {dataFilter.nom} </div>
<div> {dataFilter.prenom} </div>
<div> {dataFilter.Equipe} </div>
</>
)
}

You might also like