i don’t know how to do this when i click on edit i want this
import React, { useState } from "react";
// import './App.css';
// import { v4 as uuidv4 } from 'uuid';
function App() {
const stagiaires = [
{ id: 1, matricule: 1454, nom: "Alaoui", codepostal: 20400, ville: "Casa", moyenne: 12.56 },
{ id: 2, matricule: 1455, nom: "Mansouri", codepostal: 20400, ville: "Casa", moyenne: 14.67 }
];
const [data,setData]=useState(stagiaires);
const [stagiairesNov, setStagiairesNov] = useState({
id:'',
matricule:'',
nom:'',
codepostal:'',
ville:'',
moyenne:''
});
const handleNovStagiaire=(event)=>{
event.preventDefault();
const leNomAttribute=event.target.name;
const laValeurAttribute=event.target.value;
const laCopieStagiare={...stagiairesNov};
laCopieStagiare[leNomAttribute]=laValeurAttribute;
setStagiairesNov({...stagiairesNov, [leNomAttribute]: laValeurAttribute});
}
const handleAjouterSubmit = (event) => {
event.preventDefault();
// Trouver le dernier ID en utilisant la méthode map
const lastId = data.map(stagiaire => stagiaire.id).sort((a, b) => b - a)[0];
// Ajouter 1 pour obtenir le prochain ID
const nextId = lastId + 1;
// Vérifier que le code postal et la moyenne générale sont compris entre 0 et 20
if (stagiairesNov.codepostal < 0 || stagiairesNov.codepostal > 20) {
alert("Le code postal doit être compris entre 0 et 20");
return;
}
if (stagiairesNov.moyenne < 0 || stagiairesNov.moyenne > 20) {
alert("La moyenne générale doit être comprise entre 0 et 20");
return;
}
// Vérifier que tous les champs sont remplis
if (!stagiairesNov.matricule || !stagiairesNov.nom || !stagiairesNov.codepostal || !stagiairesNov.ville || !stagiairesNov.moyenne) {
alert("Tous les champs sont obligatoires");
return;
}
// Vérifier que le matricule est unique
if (data.some(stagiaire => stagiaire.matricule === stagiairesNov.matricule)) {
alert("Le matricule doit être unique");
return;
}
// Ajouter le nouveau stagiaire à la liste des stagiaires existants
const stagiaireJdad = {
id: nextId,
matricule: stagiairesNov.matricule,
nom: stagiairesNov.nom,
codepostal: stagiairesNov.codepostal,
ville: stagiairesNov.ville,
moyenne: stagiairesNov.moyenne
}
const StagiaireEntrer = [...data, stagiaireJdad]
setData(StagiaireEntrer);
}
const handleDelete = (id) => {
// Filtrer les stagiaires en utilisant la méthode filter pour ne pas inclure celui qui a l'ID spécifié
const updatedData = data.filter(stagiaire => stagiaire.id !== id);
// Mettre à jour la liste des stagiaires avec les stagiaires filtrés
setData(updatedData);
}
const [editId, setEditId] = useState('');
const handleEdit = (id) => {
setEditId(id);
const stagiaire = data.find(stagiaire => stagiaire.id === id);
setStagiairesNov({
id: stagiaire.id,
matricule: stagiaire.matricule,
nom: stagiaire.nom,
codepostal: stagiaire.codepostal,
ville: stagiaire.ville,
moyenne: stagiaire.moyenne
});
}
return (
<div>
{data.length === 0 ? <p style={{color: "red"}}>Tableau des stagiaires vide</p> :
<table className="app-container">
<thead>
<tr>
<th>ID </th>
<th>Matricule </th>
<th>Nom </th>
<th>Ville </th>
<th>Code Postal </th>
<th>Moyenne </th>
</tr>
</thead>
<tbody>
{data.map((stagiaire)=>
<tr key={stagiaire.id}>
<td>{stagiaire.id}</td>
<td>{stagiaire.matricule}</td>
<td>{stagiaire.nom}</td>
<td>{stagiaire.ville}</td>
<td>{stagiaire.codepostal}</td>
<td>{stagiaire.moyenne}</td>
<td><button onClick={() => handleDelete(stagiaire.id)}>Supprimer</button></td>
<td><button onClick={() => handleEdit(stagiaire.id)}>Editer</button></td>
</tr>
)}
</tbody>
</table>
}
<form onSubmit={handleAjouterSubmit}>
<section><label >ID :<input type="number" name="id" /*placeholder={data.id}required="required"*/ onChange={handleNovStagiaire} disabled/></label></section>
<section><label >Matricule :<input type="number" name="matricule" required="required" onChange={handleNovStagiaire}/></label></section>
<section><label >Nom :<input type="text" name="nom" required="required" onChange={handleNovStagiaire}/></label></section>
<section><label >Ville :<input type="text" name="ville" required="required" onChange={handleNovStagiaire}/></label></section>
<section><label >Code Postal :<input type="number" name="codepostal" required="required" onChange={handleNovStagiaire}/></label></section>
<section><label >Moyenne :<input type="number" name="moyenne" required="required" onChange={handleNovStagiaire}/></label></section>
<section><button type="submit" >Ajouter </button></section>
</form>
</div>
);
}
export default App;