so I tried everything I think but no able to delete data from my mysql table using axios.delete with ProjectId(table ids)

Hers my code for where i made 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 my server.js code

here i am telling sql to delete this coloum 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('somthings 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 sucsessfully')
    })
    
} );


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 listning to port 3000')
})

and hers here i am calling my function to be called

I think my props management is all right.Am I calling the function in the wrong plase

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>
                <a href="/">{props.git}</a>
            </div>
        </div>
    )
};

CodePudding user response：

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>
        <a href="/">{props.git}</a>
      </div>
    </div>
  );
}

CodePudding user response：

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
  })
})