error adding data to mysql column and all column counted as NULL-CodePudding

Hello so i started the project using react, node js, and mysql. My goal is to create a form in frontend and want to add the data in form to mysql database.

But after submiting there is a error'INSERT INTO employee (Name, Age, Position, Salary) VALUES (NULL,NULL,NULL,NULL)'.

The problem here is in all column it says "cannot be null". How do i solve this.

App.js

    import React,{ useState, useEffect} from 'react';
    import './App.css';
    import Axios from 'axios';
    
    function App() {
      const [employeeName, setName] = useState("")
      const [employeeAge, setAge] = useState("")
      const [employeePosition, setPosition] = useState("")
      const [employeeSalary, setSalary] = useState("")
    
      const submitData = () => {
        Axios.post('http://localhost:3001/api/insert', {
          Name: employeeName, 
          Age: employeeAge, 
          position: employeePosition, 
          Salary: employeeSalary
        }).then(()=>{
          alert('Berhasil')
        })
    }
    
      return (
        <div className="App">
          <p>CRUD Applicaiton</p>
    
    
          <div className="formControl">
              <label>Name</label>
              <input type="text"  onChange={(e)=> {
                setName(e.target.value);
              }} />
              <label>Age</label>
              <input type="number"  onChange={(e)=> {
                setAge(e.target.value);
              }} />
              <label>Position</label>
              <input type="text"  onChange={(e)=> {
                setPosition(e.target.value);
              }} />
              <label>Salary</label>
              <input type="number"  onChange={(e)=> {
                setSalary(e.target.value);
              }} />
              <button type="submit" value="Submit" onClick={submitData}>Add Data</button>
              <button type="reset" value="Reset">Reset</button>
          </div>
    
        </div>
      );
    }
    
    export default App;

index.js (backend)

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

const db = mysql.createPool({
    host: "localhost",
    user: "root",
    password: "",
    database: "coba"
});

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

app.post("/api/insert", (req, res) => {

    const Name = req.body.employeeName
    const Age = req.body.employeeAge
    const Position = req.body.employeePosition
    const Salary = req.body.employeeSalary

    const sqlInsert = "INSERT INTO employee (Name, Age, Position, Salary) VALUES (?,?,?,?)"
    db.query(sqlInsert, [Name, Age, Position, Salary], (err, result)=>{
        console.log(err)
    });
})

app.listen(3001, ()=> {
    console.log('running on port 3001')
});

CodePudding user response：

You need to change your backend code.

Try once with the following code:

app.post("/api/insert", (req, res) => {

    const Name = req.body.Name
    const Age = req.body.Age
    const Position = req.body.position
    const Salary = req.body.Salary

    const sqlInsert = "INSERT INTO employee (Name, Age, Position, Salary) VALUES (?,?,?,?)"
    db.query(sqlInsert, [Name, Age, Position, Salary], (err, result)=>{
        console.log(err)
    });
})