Not able to delete my column from my Mysql table - mysql

Question

I tried everything I think but no able to delete data from my mysql table using axios.delete with ProjectId (table ids).
Here's my code for where I declared my function, and as you can see I am passing the function through props
import React from "react";
import Projects from "../Projects/Projects";
import "./pluseProjects.css";
import {IoIosAddCircleOutline} from "react-icons/io"
import { Link } from "react-router-dom";
import {BiChevronLeftCircle,BiChevronRightCircle} from "react-icons/bi"
import {IoRefreshCircleOutline} from "react-icons/io5";
import axios from "axios";
export default function PluseProjects() {
const [addNewProjects, setAddNewProjects ] = React.useState(false)
const [getQuery,setGetQuery] = React.useState({
projectList:[]
})
function onStateChange() {
setAddNewProjects(!addNewProjects)
}
function getProjectList() {
axios.get(`http://localhost:3060/projects`)
.then((response) => response.data)
.then(response2 => {
setGetQuery({projectList : response2})
})
}
function onDeleteId(ProjectId) {
axios.delete(`http://localhost:3060/deleteprojects/${ProjectId}`)
getProjectList();
}
return(
<div className="Section-Projects" >
<div className="top-projects">
<h1>My Projects </h1>
<button onClick={getProjectList} className="Refresh"><IoRefreshCircleOutline /></button>
<Link to={addNewProjects?'/AddProjects':""} ><button className="Add-newProject" onClick={onStateChange}><IoIosAddCircleOutline /></button></Link>
</div>
<div className="Projects">
<button className="arrowLeft"><BiChevronLeftCircle /></button>
<div className="Single">
{getQuery.projectList.map((gettingQuery) =>
<Projects
onHandleDelete={onDeleteId(gettingQuery.ProjectId)}
ProjectName={gettingQuery.ProjectName}
Discription={gettingQuery.Discription}
git={gettingQuery.git}
Img={gettingQuery.Img}
/>
)}
</div>
<button className="arrowRight"><BiChevronRightCircle /></button>
</div>
</div>
)
};
Here is my server.js code - I am telling SQL to delete this column with some ProjectId:
const express = require('express');
const cors = require('cors')
const PORT = 3060;
const db = require('./Database')
const bodyParser = require('body-parser');
const { response } = require('express');
const app = express();
app.use(cors());
app.use(bodyParser.json());
app.get('/projects', (req,res) => {
const TASK_QUERY = `SELECT * FROM newproject`;
db.query(TASK_QUERY , (err, response) => {
if(err) res.status(404).send('something is wrong')
else res.send(response)
})
});
app.post('/addProjects', (req,res) => {
const ADD_QUERY = `INSERT INTO newproject (ProjectName,Discription,git,Img) VALUES('${req.body.ProjectName}','${req.body.Discription}','${req.body.git}','${req.body.Img}')`;
db.query(ADD_QUERY, (err) => {
if (err) console.log(err)
else res.send('Query added successfully')
})
} );
app.delete('/deleteprojects/:ProjectId', (req,res) => {
console.log(req.params.ProjectId)
const DELETE_TASK = `DELETE FROM newProjects WHERE ProjectId = ${req.params.ProjectId}`
db.query(DELETE_TASK, (err,res) => {
if (err) console.log(err)
})
})
app.listen(PORT, () => {
console.log('app is listening on port 3000')
})
And here's where I am calling my function - I think my props management is all right. Am I calling the function the wrong way?
import React from "react";
import "./Projects.css"
import {RxCrossCircled} from "react-icons/rx"
export default function Projects(props) {
return(
<div className="Project" >
<div className="Image">
<img src={props.Img} alt=""/>
<button className="cross" onClick={props.ProjectId}><RxCrossCircled /></button>
</div>
<div className="Bottom">
<h3>{props.ProjectName}</h3>
<p>{props.Discription}</p>
{props.git}
</div>
</div>
)
};

Answer 1

If you see a http call in the network tab when you trigger the function (clicking the delete button etc). That means your frontend(react part) is working fine. Also i clearly see that you are missing an res.send() statement in your delete route in your server.js.
app.delete('/deleteprojects/:ProjectId', (req, res) => {
console.log(req.params.ProjectId)
const DELETE_TASK = `DELETE FROM newProjects WHERE ProjectId = ${req.params.ProjectId}`
db.query(DELETE_TASK, (err, res) => {
if (err) console.log(err)
res.status(200).send({}) // you missed this
})
})

Answer 2

Your onHandleDelete is not being used in the Projects component. And the ProjectId is not passed as a prop. In the PluseProjects you immediately call the onDeleteId function you should call it via an anonymous function.
PluseProjects
{
getQuery.projectList.map((gettingQuery) => (
<Projects
onHandleDelete={() => onDeleteId(gettingQuery.ProjectId)} // () =>
ProjectName={gettingQuery.ProjectName}
Discription={gettingQuery.Discription}
git={gettingQuery.git}
Img={gettingQuery.Img}
/>
));
}
Projects
export default function Projects(props) {
return (
<div className="Project">
<div className="Image">
<img src={props.Img} alt="" />
<button className="cross" onClick={props.onHandleDelete}> // change ProjectId to onHandleDelete
<RxCrossCircled />
</button>
</div>
<div className="Bottom">
<h3>{props.ProjectName}</h3>
<p>{props.Discription}</p>
{props.git}
</div>
</div>
);
}