React and mySQL errors 'Error: ER_EMPTY_QUERY: Query was empty '

Question

I'm trying to connect my React and mySQL connection and I've done it with and without the password and having the password seems to give me an query was empty error, but when I print the req.body, it has all of my information. I am printing the req.body just before the query so I'm not sure why it sees it as empty.

{ name: '123', age: '123', address: '123', rent: '123',
leaseLength: '1', startDate: '2022-06-01' }

  code: 'ER_EMPTY_QUERY',
  errno: 1065,
  sqlMessage: 'Query was empty',
  sqlState: '42000',
  index: 0,
  sql: undefined

Here's the index.js (server)

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: 'password',
    database: 'tenantsystem'
});

app.post('/create', (req, res) => {
    console.log(req.body)
    const name = req.body.name
    const age = req.body.age
    const address = req.body.address
    const rent = req.body.name
    const leaseLength = req.body.leaseLength
    const startDate = req.body.startDate

    db.query('INSERT INTO tenants (name, age, address, rent, lease_length, start_date) VALUES (?,?,?,?,?,?)'[name, age, address, rent, leaseLength, startDate], (err, result) => {
        if (err) {
            console.log(err)
        }
        else {
            res.send("Values Inserted")
        }
    });
});

app.listen(3001, () => {
    console.log("Server is running...")
})

Here's the front-end App.js (react)

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


function App() {
  const [name, setName] = useState('')
  const [age, setAge] = useState('')
  const [address, setAddress] = useState('')
  const [rent, setRent] = useState('')
  const [leaseLength, setLeaseLength] = useState('')
  const [startDate, setStartDate] = useState('')
  const displayInfo = () => {
    console.log(name + age + address + rent + leaseLength + startDate)
  }


  const addTenant = () => {
    console.log(name)
    Axios.post('http://localhost:3001/create', {
      name: name,
      age: age,
      address: address,
      rent: rent,
      leaseLength: leaseLength,
      startDate: startDate,
    }).then(() => {
      console.log('Success');
    })
  }

  return (
    <div className="App">
      <div className="information">
        <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>Address: </label>
        <input type="text" onChange={(e) => {
          setAddress(e.target.value)
        }} />
        <label>Rent: </label>
        <input type="number" onChange={(e) => {
          setRent(e.target.value)
        }} />
        <label> lease length in months</label>
        <input type="number" onChange={(e) => {
          setLeaseLength(e.target.value)
        }} />
        <label>start date: </label>
        <input type="date" onChange={(e) => {
          setStartDate(e.target.value)
        }} />
        <button onClick={addTenant}> Add Tenant</button>
      </div>
    </div>
  );
}

export default App;

Answer 1

I think it might be too late but anyway what you forgot here was the "," between the query and the parameters