React Form,Table problem in edit button

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;

I would think that you’d want each input to have a value attribute assigned to a state variable, and then when you click the edit button, you assign those variables, and therefore the input would then have that value.

Exactly, you can give me a hand?

Well, cant you assign a value to each field… <input … value={stagiairesNov.id} … > and then you also need an onchange for each to update which I think you already have (hard for me to just scan with the language difference). Then the onclick for the button would jus tset the value of stagiariresNov fields, and that should automatically show in your inputs due to React

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.