Undefined value passed into INSERT statement using NodeJS,Mysql,React app

Question

Please find my code and error.

My App.js frontend code

import './App.css';
import { useState } from 'react';
import Axios from 'axios';

function App() {
  
  const [Var_EName,setName] = useState("")
  const [Var_Age,setAge] = useState(0)
  const [Var_Country,setCountry] = useState("")
  const [Var_Position,setPosition] = useState("")
  const [Var_Sal,setSalary] = useState(0)
  //const [employeeList, setEmployeeList] = useState([]);

  const AddEmployee = () => {

    Axios.post('http://192.168.137.1:3001/create',
    {Ename:Var_EName,
     EAge:Var_Age,
     ECountry:Var_Country,
     EPosition:Var_Position,
     ESal:Var_Sal}).then(() => 
     console.log("Succssfully Inserted") 
     )
  }
  
  const displayEmpInfo = () => {
    console.log(Var_EName  +Var_Age + Var_Country + Var_Position + Var_Sal)
  };
  
  return (
    <div className="App">
      <header className="App-header">CRUD Application Using NodeJS ReactApp MySql</header>

      <div className="empinformation">
        <label>Name :</label>
        <input type="text" onChange={(event) => setName(event.target.value)} ></input>
        <label>Age :</label>
        <input type="number" onChange={(event) => setAge(event.target.value)}></input>
        <label>Country :</label>
        <input type="text" onChange={(event) => setCountry(event.target.value)}></input>
        <label>Position :</label>
        <input type="text" onChange={(event) => setPosition(event.target.value)}></input>
        <label>Salary(Per Year) :</label>
        <input type="number" onChange={(event) => setSalary(event.target.value)}></input>
        <button onClick={AddEmployee}>Add Employee</button>
        <button onClick={displayEmpInfo}>Disp Emp</button>
     </div>
    </div>

  );
}

export default App;

And my index.js code for backend as below.

const express = require("express");
const app = express();
const mysql = require("mysql");
const cors = require("cors");

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

const db = mysql.createConnection({
    user: "root",
    host:"localhost",
    password:"Kalpataru",
    database:"sakila"
});

db.connect(function (err) {
    // connection.end();
    if (!err) {
        console.log("Database is connected ... \n");
    } else {
        console.log("Error connecting database ... \n");
    }
});


app.post("/create",(req,res) => {
    
    console.log('Employee Name : ' + req.body.EName);
    const Var_EName = req.body.EName;
    const Var_Age = req.body.EAge;
    const Var_Country = req.body.ECountry;
    const Var_Position = req.body.EPosition;
    const Var_Sal = req.body.ESal;
    

    db.query("INSERT INTO employes(Ename,EAge,ECountry,EPosition,ESal) VALUES(?,?,?,?,?)",
    [Var_EName,Var_Age,Var_Country,Var_Position,Var_Sal], 
    (err,result) => {
        if (err)
        {
            console.log(err)
        }else
        {
           res.send("Values Inserted & Saved To Database.") 
        }
    }
    );

});


app.listen(3001,() => {
    console.log("Yeah, Your Server is running on Port : 3001")
});

The below error i get in server terminal.

PS C:\CRUD-APPLICATION\server> node index.js
Yeah, Your Server is running on Port : 3001
Database is connected ...

Employee Name : undefined
Error: ER_BAD_NULL_ERROR: Column 'Ename' cannot be null
    at Query.Sequence._packetToError (C:\CRUD-APPLICATION\server\node_modules\mysql\lib\protocol\sequences\Sequence.js:47:14)
    at Query.ErrorPacket (C:\CRUD-APPLICATION\server\node_modules\mysql\lib\protocol\sequences\Query.js:79:18)
    at Protocol._parsePacket (C:\CRUD-APPLICATION\server\node_modules\mysql\lib\protocol\Protocol.js:291:23)
    at Parser._parsePacket (C:\CRUD-APPLICATION\server\node_modules\mysql\lib\protocol\Parser.js:433:10)
    at Parser.write (C:\CRUD-APPLICATION\server\node_modules\mysql\lib\protocol\Parser.js:43:10)
    at Protocol.write (C:\CRUD-APPLICATION\server\node_modules\mysql\lib\protocol\Protocol.js:38:16)
    at Socket.<anonymous> (C:\CRUD-APPLICATION\server\node_modules\mysql\lib\Connection.js:88:28)
    at Socket.<anonymous> (C:\CRUD-APPLICATION\server\node_modules\mysql\lib\Connection.js:526:10)
    at Socket.emit (node:events:369:20)
    at addChunk (node:internal/streams/readable:313:12)
    --------------------
    at Protocol._enqueue (C:\CRUD-APPLICATION\server\node_modules\mysql\lib\protocol\Protocol.js:144:48)
    at Connection.query (C:\CRUD-APPLICATION\server\node_modules\mysql\lib\Connection.js:198:25)
    at C:\CRUD-APPLICATION\server\index.js:37:8
    at Layer.handle [as handle_request] (C:\CRUD-APPLICATION\server\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\CRUD-APPLICATION\server\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (C:\CRUD-APPLICATION\server\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\CRUD-APPLICATION\server\node_modules\express\lib\router\layer.js:95:5)
    at C:\CRUD-APPLICATION\server\node_modules\express\lib\router\index.js:281:22
    at Function.process_params (C:\CRUD-APPLICATION\server\node_modules\express\lib\router\index.js:335:12)
    at next (C:\CRUD-APPLICATION\server\node_modules\express\lib\router\index.js:275:10) {
  code: 'ER_BAD_NULL_ERROR',
  errno: 1048,
  sqlMessage: "Column 'Ename' cannot be null",
  sqlState: '23000',
  index: 0,
  **sql: "INSERT INTO employes(Ename,EAge,ECountry,EPosition,ESal) VALUES(NULL,'38','India','Developer','800000')"**
}

sql: "INSERT INTO employes(Ename,EAge,ECountry,EPosition,ESal) VALUES(NULL,'38','India','Developer','800000')"

As You all can see in INSERT statement other values i am getting correctly values except Ename value passing as null

Where is the issue & how to solve the issue ?

Please reply.

FanoFN · Accepted Answer · 2021-04-22 06:38:01Z

2

There is a typo. In the frontend code :

 Axios.post('http://192.168.137.1:3001/create',
    {Ename:Var_EName, /// <--- It should be "EName:Var_EName" instead of "Ename:Var_EName"
     EAge:Var_Age,
     ECountry:Var_Country,
     EPosition:Var_Position,
     ESal:Var_Sal}).then(() => 
     console.log("Succssfully Inserted") 
     )
  }

In the backend :

 const Var_EName = req.body.EName;

edited Apr 22, 2021 at 6:38

FanoFN

7,1442 gold badges16 silver badges35 bronze badges

answered Apr 22, 2021 at 4:50

Đăng Khoa Đinh

5,4413 gold badges18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kalpataru Rath · Accepted Answer · 2021-04-22 07:07:13Z

0

Thanks for your quick answer , it works. As i am new to React & NodeJS ,so don't understand which one is variable and which one is column value.

I thought that Ename is the column and Var_EName is the variable.

Is it true ? How do we set or use or write something as a variable and database column ?

Please reply and Thanks again for your response.

answered Apr 22, 2021 at 7:07

Kalpataru Rath

34 bronze badges

2 Comments

FanoFN Over a year ago

It's not about which one is a variable or a column. The reason why you got undefined simply because of javascript case sensitivity. What's the difference between Ename and EName is the small and capital letter of N.

Đăng Khoa Đinh Over a year ago

totally agree with @FaNo_FN. It is just a typo.

Collectives™ on Stack Overflow

Undefined value passed into INSERT statement using NodeJS,Mysql,React app

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest