how can i post data from reactjs form to mysql database

Question

How can I send this data to database MySQL from a reactjs form? I'm a beginner in reactjs and I'm tired of trying.

In the back-end I use nodejs, express, and cors, so if u can tell me how because I have to finish this work.

The console returns GET Localhost 404 Not Found .

This is what I do but I don't know there is a better way to make it.

import React, { Component } from 'react'
import { Table,Button,
        Modal,ModalHeader,
        ModalBody,ModalFooter,
        Label,Input,Form } from 'reactstrap';

export default class Db1 extends Component {

state = {
    users: [],
        newUserData: {
            nom: '',
            prenom: '',
            adresse: '',
            email: ''
        },
        newUserModal:false,
    }

componentDidMount() {
    this.getUsers();
}

getUsers = () => {
    fetch('http://localhost:4000/users')
    .then(response => response.json())
    .then(response => this.setState({ users: response.data}))
    .catch(err => console.error(err))
}

addUser = () => {
    let { nom,prenom,adresse,email } = this.state.newUserData;
    fetch(`http://localhost:4000/users/add? 
          nom=${nom}&prenom=${prenom}&adresse=${adresse}&email=${email}`,{
        method: 'POST',
        body: JSON.stringify({
        nom: this.nom,
        prenom: this.prenom,
        adresse: this.adresse,
        email: this.email
        }),
        headers: {"Content-Type": "application/json"}
        })
    .then(this.getUsers)
    .catch(err => console.error(err))
    this.setState({newUserModal:false});
    console.log(this.newUserData)  // return undefined
}

toggleNewUserModal = () => {
    this.setState({
        newUserModal:  ! this.state.newUserModal
    });
}

Answer 1

const express = require('express');
const cors = require('cors');
const mysql = require('mysql');
const bodyParser = require('body-parser')

const app = express();

// Connection Mysql

const connection = mysql.createConnection({
    host : 'localhost',
    user : 'root',
    password : '',
    database : 'dbusers',
});

connection.connect(err => {
    if (err) {
        console.log("conection error");
        return err;
    }
});


// Connection Express Body-Parser Cors

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get('/', (req, res) => {
    res.send('Hello from the users server')
});

// Selectionner Tous Les Utilisateurs

app.get('/users', (req, res) => {
    const selectQuery = 'SELECT * FROM userslist';
    connection.query(selectQuery, (err, results) => {
    if(err) {
         res.send(err)
    }
    else {
         res.json({data: results})
        }
   });
});  

// Ajouter Un Nouveau Utilisateur

app.post('/users/add', (req, res) => {
    let nom = req.body.nom;
    let prenom = req.body.prenom;
    let adresse = req.body.adresse;
    let email = req.body.email;

    let insertQuery ="INSERT INTO userslist SET ?"
    const user={nom,adresse,prenom,email}
    connection.query(insertQuery,user, (err, results) => {
        if(err) {
            console.log("insert error");
            res.send(err)
        }
        else {
            res.send({ error: false, data: results, message: 'user has been 
                       updated successfully.' });
        }

    });   
});

// Editer Un Nouveau Utilisateur

app.post('/users/update/:id', (req, res) => {
    let id = req.params.id;
    let nom = req.body.nom;
    let prenom = req.body.prenom;
    let adresse = req.body.adresse;
    let email = req.body.email;
    let updateQuery =`UPDATE userslist SET ? WHERE id=${id}`
    const user={nom,adresse,prenom,email}

    connection.query(updateQuery,user, (err, results) => {
        if(err) {
            console.log("insert error");
            res.send(err)
        }
        else {
            res.send({ error: false, data: results, message: 'user has been 
                       updated successfully.' });
        }
    });   
});

// Suprimer un Utilisateur

app.post("/users/delete/:id", (req, res) => {
    let id = req.params.id;
    let sql = 'DELETE  FROM userslist WHERE id=?';

    connection.query(sql, [id], (error, results, fields) => {
      if (error) 
      console.error(error.message);
      console.log("Deleted Row(s):", results.affectedRows);
      res.json({error:false,data: results})
    });
});

app.listen(4000, () => {
    console.log('Users server worked on port 4000...')
});