How to Edit in react js while using mysql database

user_16037500 0
Viewed 374

Hi am trying to do a CRUD application am able to do the add user but i got stock with the edit user Actually for my edit user page i just copied the add user page there and then modified it

This is what my app has to do: normally when i enter the edit user page it has to show me the user's existing information then on my part i can now modify it if i wish and then it is stored in my mysql database but it doesn't return anything i actually console logged it to see if it returns anything but it doesn't

index.js
const express = require("express");
const app = express();
const mysql = require('mysql2');
const cors = require('cors');

app.use(cors());
app.use(express.json());

const db = mysql.createConnection({
  user: 'root',
  host: 'localhost',
  password: 'obincharity',
  database: 'adherents_system',
  port: '3306',

});

app.post('/create', (req, res) => {
    
  const Nom = req.body.Nom
  const Email = req.body.Email
  const Profession = req.body.Profession
  const Date_naiss = req.body.Date_naiss
  const Tel = req.body.Tel
  const Date_adhession = req.body.Date_adhession
  const formData = req.body.formData

  db.query('INSERT INTO new_table(Nom,Email,Profession,Date_naiss,Telephone,Date_adhession,Sex) VALUES(?,?,?,?,?,?,?) ',
  [Nom, Email, Profession, Date_naiss, Tel, Date_adhession, formData], (err, result) => {
      if (err){
          console.log(err)
      }else{
          res.send("Values Inserted")
      }
  });
})

app.get('/adherents', (req,res) => {
  db.query("SELECT * FROM new_table", (err, result) => {
    if (err){
      console.log(err);
    }else{
      res.send(result);
    }
  });
});
app.put('/update',(req,res)=>{
  const id = req.body.id
  const Nom = req.body.Nom
  const Email = req.body.Email
  const Profession = req.body.Profession
  const Date_naiss = req.body.Date_naiss
  const Tel = req.body.Tel
  const Date_adhession = req.body.Date_adhession
  const formData = req.body.formData 
  db.query("UPDATE SET new_table Nom=?,Email=?,Profession=?,Date_naiss=?,Telephone=?,Date_adhession=?,Sex=?  WHERE id=?",
  [Nom, Email, Profession, Date_naiss, Tel, Date_adhession, formData,id], (err, result) => {
    if (err){
      console.log(err);
    }else{
      res.send(result);
    }
  })
} )
    
app.listen(3005, () =>{
  console.log("server working");
  });

This is my add user page

import React, { useState} from "react";
import './Inscription.css';
import Axios from 'axios';

function Inscription (){
   
   const [Nom, setNom] = useState("");
   const [Email, setEmail] = useState("");
   const [Profession, setProfession] = useState("");
   const [Date_naiss, setDate_naiss] = useState(0);
   const [Tel, setTel] = useState(0);
   const [Date_adhession, setDate_adhession] = useState(0);
   const [formData, setformData] = useState("")

   const addAdherent = () =>{

      Axios.post('http://localhost:3005/create',{
        Nom: Nom,
        Email: Email,
        Profession: Profession,
        Date_naiss: Date_naiss,
        Tel: Tel,
        Date_adhession: Date_adhession,
        formData:formData,

      }).then(()=>{
        console.log("success");
      })
    }
    return(
        
        <div className= "Inscription">
           
        <div className="forme-box">
          <div class="title">Fiche d'inscription</div>
            <form>
                <div className="userdetails">
                <div>
                  <label for="nom">Nom Utilisateur</label>
                  <input type= "text" class="input-box" name="nom" placeholder="Entrer votre nom" required onChange={(event)=>{setNom(event.target.value);}}/>
                </div>
                
                <div>
                  <label for="email">Email</label>
                  <input type= "email" class="input-box" name="email" placeholder="Entrer votre email" required onChange={(event)=>{setEmail(event.target.value);}}/>
                </div>
               <div>
                  <label for="address">Profession</label>
                  <input type= "text" class="input-box" name="address" placeholder="Entrer votre profession" required onChange={(event)=>{setProfession(event.target.value);}}/>
               </div>
               <div>
                  <label for="date_naiss">Date_naissance</label>
                  <input type= "date" class="input-box" name="date_naiss" placeholder="Entrer votre profession" required  onChange={(event)=>{setDate_naiss(event.target.value);}}/>
               </div>
               <div>
                  <label for="telephone">Telephone</label>
                  <input type= "number" class="input-box" name="telephone" placeholder="Numero de telephone" required onChange={(event)=>{setTel(event.target.value);}}/>
               </div>
               <div>
                  <label for="date_adhession">Date_adhession</label>
                  <input type= "date" class="input-box" name="date_adhession" onChange={(event)=>{setDate_adhession (event.target.value);}} />
               </div>
               </div>
            </form>
           
            <div className="gender">
                  <label for="">male</label>
                   <input type="radio" name="gender" value="male" onChange={(event)=>{setformData(event.target.value);}} />   
                  <label for="">female</label>
                   <input  type="radio" name="gender" value="female" onChange={(event)=>{setformData (event.target.value);}} />   
                
               </div>
            <div class="button" onClick = {addAdherent}>
                    <input type="submit" value="Enrégistré"/>
                </div>
            </div>
              
        </div>
        
    )
    
}
export default Inscription;

And here is my edit user page

import React, { useState, useEffect} from "react";
import {useParams} from 'react-router-dom'
import './Inscription.css';
import Axios from 'axios';

function EditUser () {

    const {id} = useParams();
    
   const [Nom, setNom] = useState("");
   const [Email, setEmail] = useState("");
   const [Profession, setProfession] = useState("");
   const [Date_naiss, setDate_naiss] = useState(0);
   const [Tel, setTel] = useState(0);
   const [Date_adhession, setDate_adhession] = useState(0);
   const [formData, setformData] = useState("")



   const editUser = () =>{

      Axios.post('http://localhost:3005/create',{
        Nom: Nom,
        Email: Email,
        Profession: Profession,
        Date_naiss: Date_naiss,
        Tel: Tel,
        Date_adhession: Date_adhession,
        formData:formData,

      }).then(()=>{
        console.log("success");
      })
    }

    const loadUser = () =>{
        Axios.get("http://localhost:3005/adherents/"+ id)
        .then((response) => {
       console.log(response);
          })
    }
    useEffect(() => {
        loadUser();
      },[]);

    return(
       
        <div className= "Inscription">
           
        <div className="forme-box">
          <div class="title">Editer les informations de l'utilisateur</div>
            <form>
                <div className="userdetails">
                <div>
                  <label for="nom">Nom Utilisateur</label>
                  <input type= "text" class="input-box" name="nom" placeholder="Entrer votre nom" required onChange={(event)=>{setNom(event.target.value);}}/>
                </div>
                
                <div>
                  <label for="email">Email</label>
                  <input type= "email" class="input-box" name="email" placeholder="Entrer votre email" required onChange={(event)=>{setEmail(event.target.value);}}/>
                </div>
               <div>
                  <label for="address">Profession</label>
                  <input type= "text" class="input-box" name="address" placeholder="Entrer votre profession" required onChange={(event)=>{setProfession(event.target.value);}}/>
               </div>
               <div>
                  <label for="date_naiss">Date_naissance</label>
                  <input type= "date" class="input-box" name="date_naiss" placeholder="Entrer votre profession" required  onChange={(event)=>{setDate_naiss(event.target.value);}}/>
               </div>
               <div>
                  <label for="telephone">Telephone</label>
                  <input type= "number" class="input-box" name="telephone" placeholder="Numero de telephone" required onChange={(event)=>{setTel(event.target.value);}}/>
               </div>
               <div>
                  <label for="date_adhession">Date_adhession</label>
                  <input type= "date" class="input-box" name="date_adhession" onChange={(event)=>{setDate_adhession (event.target.value);}} />
               </div>
               </div>
            </form>
           
            <div className="gender">
                  <label for="">male</label>
                   <input type="radio" name="gender" value="male" onChange={(event)=>{setformData(event.target.value);}} />   
                  <label for="">female</label>
                   <input  type="radio" name="gender" value="female" onChange={(event)=>{setformData (event.target.value);}} />   
                
               </div>
            <div class="button" onClick = {editUser}>
                    <input type="submit" value="Enrégistré"/>
                </div>
            </div>
              
        </div>
    )
}
export default EditUser;
axios reactjs mysql
1 Answers

Get data based on its id (Server Side)

    app.get('/adherents/:id', (req, res) => {
      db.query(
        `SELECT * FROM new_table WHERE id=${req.params.id}`,
        (err, result) => {
          if (err) {
            console.log(err);
          } else {
            res.json(result);
          }
        }
      );
    });

Get data based on its id (Front Side)

    const [myData, setMyData] = useState([]);
    const {id} = useParams();
        
    const getData = async () => {
      try {
        const res = await Axios.get(`http://localhost:3005/adherents/${id}`);
        await setMyData(res.data);
      } catch (error) {
        console.log(error);
      }
    };
        
    useEffect(() => {
      getData();
    }, []);

Update data (Server Side)

    app.put('/update/:id', (req, res) => {
      const data = {
        Nom: req.body.Nom,
        Email: req.body.Email,
        Profession: req.body.Profession,
        Date_naiss: req.body.Date_naiss,
        Tel: req.body.Tel,
        Date_adhession: req.body.Date_adhession,
        formData: req.body.formData 
      };
      db.query(`UPDATE new_table SET ? WHERE id=${req.params.id}`, data, (err, result) => {
        if (err) {
          console.log(err);
        } else {
          res.json(result);
        }
      });
    });

Update data (Front Side)

import React, { useState, useEffect } from 'react';
import Axios from 'axios';

export default function App() {
  const {id} = useParams();
  const [myData, setMyData] = useState({});

  const [Nom, setNom] = useState('');
  const [Email, setEmail] = useState('');
  const [Profession, setProfession] = useState('');
  const [DateNaiss, setDateNaiss] = useState('');
  const [Tel, setTel] = useState('');
  const [DateAd, setDateAd] = useState('');
  const [formData, setFormData] = useState('');

  // get function
  const getData = () => {
    try {
      Axios.get(`http://localhost:3005/adherents/${id}`).then((res) => {
        setMyData(Object.assign({}, ...res.data)); // array of object to object
      });
    } catch (error) {
      console.log(error);
    }
  };

  // update function
  const updateData = async (e) => {
    e.preventDefault();
    try {
      Axios.put(`http://localhost:3005/update/${id}`, {
        Nom,
        Email,
        Profession,
        Date_naiss: DateNaiss,
        Tel,
        Date_adhession: DateAd,
        formData,
      }).then(() => {
        console.log('success');
        getData();                      // callback to refresh the data display
      });
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  // myData is an object so we can easily access its content and assign it to states
  useEffect(() => {
    setNom(myData.Nom);
    setEmail(myData.Email);
    setProfession(myData.Profession);
    setDateNaiss(myData.Date_naiss);
    setTel(myData.Tel);
    setDateAd(myData.Date_adhession);
    setFormData(myData.formData);
  }, [myData]);

  return (
    <div>
      <ul>
        <li>{myData.Nom}</li>
        <li>{myData.Email}</li>
        <li>{myData.Profession}</li>
        <li>{myData.Date_naiss}</li>
        <li>{myData.Tel}</li>
        <li>{myData.Date_adhession}</li>
        <li>{myData.formData}</li>
      </ul>

      <form onSubmit={updateData}>
        <input
          type="text"
          name="nom"
          placeholder="Nom"
          value={Nom || ''} // important for displaying data and modifying it (controlled / uncontrolled)
          onChange={(e) => setNom(e.target.value)}
        />
        <br />
        <input
          type="text"
          name="email"
          placeholder="Email"
          value={Email || ''}
          onChange={(e) => setEmail(e.target.value)}
        />
        <br />
        <input
          type="text"
          name="profession"
          placeholder="Profession"
          value={Profession || ''}
          onChange={(e) => setProfession(e.target.value)}
        />
        <br />
        <input
          type="text"
          name="date_naissance"
          placeholder="Date de naissance"
          value={DateNaiss || ''}
          onChange={(e) => setDateNaiss(e.target.value)}
        />
        <br />
        <input
          type="text"
          name="tel"
          placeholder="Telephone"
          value={Tel || ''}
          onChange={(e) => setTel(e.target.value)}
        />
        <br />
        <input
          type="text"
          name="date_adhesion"
          placeholder="Date adhésion"
          value={DateAd || ''}
          onChange={(e) => setDateAd(e.target.value)}
        />
        <br />
        <input
          type="text"
          name="form_data"
          placeholder="Form Data"
          value={formData || ''}
          onChange={(e) => setFormData(e.target.value)}
        />
        <button>Submit</button>
      </form>
    </div>
  );
}

enter image description here

user_153694100
Related