Insert into SQL database from React front end - sql

Question

Im trying to insert some data into a SQL table but Im getting nothing from the front or back end I have tried console.log at various intervals but I cant seem to get data from either side.
For reference I have table called products with three columns id, name, image Im trying to insert both name and image with a button click. Additionally im trying to delete data thats been inserted and that also does nothing.
I have already achieved this with one table but that table only has one column.
Heres the front end
import React, {useState, useEffect} from 'react';
import axios from 'axios';
import Helmet from 'react-helmet';
export default function Products() {
const [rows, setRows] = useState([]);
const [name, setName] = useState('');
const [src, setSrc] = useState('');
useEffect(() => {
axios.get('/products/get')
.then(res => {
setRows(res.data);
}).catch(err => {
console.log(err);
});
});
//Insert into database api request
const insertRow = () => {
axios.post('/products/insert', {
row: {name: name, image: src}
});
console.log(name, src);
};
//Delete from database api request
const deleteRow = () => {
axios.delete(`/products/delete/${name, src}`);
};
return (
<>
<Helmet>
<title>Title | products</title>
</Helmet>
<div className="pt-36 sm:pt-44 pb-20 md:pb-48 max-w-[1200px] mx-5 lg:mx-auto">
<input className="border-2 border-black p-1" type="text" onChange={setName} />
<input className="border-2 border-black p-1" type="text" onChange={setSrc} />;
<button className="border-2 border-l-0 border-black p-1" onClick={insertRow}>Submit</button>
{rows.map((row, index) => {
return (
<div key={index}>
<p>{row.name}</p>
<img src={row.image} alt={row.name} />
<button onClick={() => {deleteRow(row)}}>Delete</button>
</div>
)
})}
</div>
</>
);
};
And the back end
const express = require('express');
const cors = require('cors');
const db = require('./config/db');
const app = express();
const PORT = process.env.PORT || 8080;
//Dependencies
app.use(express.json());
app.use(cors());
//#region Products table
app.get('/products/get', (req, res) => {
const selectAll = 'SELECT * FROM products';
db.query(selectAll, (err, rows) => {
if (err) throw err;
res.send(rows);
});
});
//Insert into database
app.post('/products/insert', (req, res) => {
const row = req.body.row; //Row to insert
const insertRow = "INSERT INTO products (name, image) VALUES (?, ?)"; //Insert query
db.query(insertRow, [row], (err, rows) => { //Insert row into database
if (err) throw err;
console.log('inserted: ' + row); //Print row inserted
});
console.log(row);
});
//Delete from database
app.delete('/products/delete/:row', (req, res) => {
const row = req.params.row;
const deleteRow = "DELETE FROM products WHERE name = ?";
db.query(deleteRow, [row], (err, rows) => {
if (err) throw err;
console.log('deleted: ' + row);
});
});
//#endregion
//Server port
app.listen(process.env.PORT || PORT, () => {
console.log('Server started on port ' + PORT);
});

Answer 1

You have a problem in your frontend code, the setName and setSrc are done improperly:
return (
<input className="border-2 border-black p-1" type="text" onChange={setName} />
<input className="border-2 border-black p-1" type="text" onChange={setSrc} />;
)
Here's how it should be:
return (
<input className="border-2 border-black p-1" type="text" onChange={(event) => setName(event.target.value)} />
<input className="border-2 border-black p-1" type="text" onChange={(event) => setSrc(event.target.value)} />;
)