Exercice :Crud Client(id,nom,prenom)
App.js
import React, { useState } from "react";
import { Routes,Route ,useNavigate,Link} from "react-router-dom";
import Ajouter from "./Ajouter";
import ListClient from "./ListClient";
import Details from "./Details";
import Modifier from "./Modifier";
export default function App()
{
const [listeClients,setListClients]=useState([])
const navigate =useNavigate()
const ajouterClient=(client)=>{
setListClients([...listeClients,client]);
navigate("/clients",{state:{message:"Bien ajouter"}})
}
const supprimerClient=(index)=>{
setListClients(listeClients.filter((c,i)=>i!=index))
}
const modifierClient=(client)=>{
const listeClientsModifier=listeClients.map((c,index)=>{
if(c.id==client.id){
return client;
}
return c;
})
setListClients(listeClientsModifier);
navigate("/clients",{state:{message:"Bien modifié"}})
}
return (<div>
<Link to="/ajouter">Ajouter</Link>
<Link to="/clients">Liste Clients</Link>
<Routes>
<Route path="/ajouter"
element={<Ajouter ajouterClient={ajouterClient} />} />
<Route path="/clients" element={<ListClient listesClient={listeClients} supprimerClient={supprimerClient}/>} />
<Route path="/details" element={<Details />} />
<Route path="/modifier" element={<Modifier modifierClient={modifierClient} />} />
</Routes>
</div>)
}
Ajouter.js
import React, { useState } from "react";
export default function Ajouter({ajouterClient})
{
const [client,setClient]=useState({
id:'',
nom:'',
prenom:''
})
const getValue=(event)=>{
setClient({
...client,
[event.target.name]:event.target.value
})
}
const validerajouter=()=>
{
alert("hi")
//validation des inputs....
if(client.id!='')
{
ajouterClient(client)
}
}
return (<div>
id: <input name="id" type="number" value={client.id} onChange={getValue} />
<br/> nom: <input name="nom" type="text" value={client.nom} onChange={getValue} />
<br/> prenom: <input name="prenom" type="text" value={client.prenom} onChange={getValue} />
<input value="ajouter" type="button" onClick={validerajouter} />
</div>)
}
ListClient.js
import React,{useState} from "react";
import { useLocation, useNavigate } from "react-router-dom";
export default function ListClient({listesClient,supprimerClient})
{
const location=useLocation();
const navigate=useNavigate();
const ShowDetails=(v)=>{
navigate("/details",{state:{client:v}})
}
const modifier=(v)=>{
navigate("/modifier",{state:{client:v}})
}
return (<div>
<table>
<thead>
<th>Id</th>
<th>Nom</th>
<th>Prénom</th>
<th>Actions</th>
</thead>
<tbody>
{listesClient.map((c,index)=>(
<tr>
<td>{c.id}</td>
<td>{c.nom}</td>
<td>{c.prenom}</td>
<td>
<button onClick={()=>supprimerClient(index)}>Supprimer</button>
<button onClick={()=>ShowDetails(c)}>Details</button>
<button onClick={()=>modifier(c)}>Modifier</button>
</td>
</tr>
))
}
</tbody>
</table>
{location.state!=null?location.state.message:""}
</div>)
}
Details.js
import React, { useState } from "react";
import { useLocation } from "react-router-dom";
export default function Details()
{
const location=useLocation();
const [client,setClient]=useState(location.state.client);
return (<div>
les details du client {client.id}
<br/>
Nom:{client.nom}
<br/>
prénom:{client.prenom}
</div>)
}
Modifier.js
import React ,{useState} from "react";
import { useLocation } from "react-router-dom";
export default function Modifier({modifierClient})
{
const location=useLocation();
const [client,setClient]=useState(location.state!=null?location.state.client:null)
const getValue=(event)=>{
setClient({
...client,
[event.target.name]:event.target.value
})
}
return (&t;div>
&t;input name="nom" value={client.nom} onChange={getValue} />
&t;input name="prenom" value={client.prenom} onChange={getValue} />
&t;input value="Modifier" type="button" onClick={()=>modifierClient(client)} />
&t;/div>)
}
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
//import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import App from './ExerciceRoutage/App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();