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;
