Can't delete item using ReactJs MongoDB NodeJS

Question

So I'm working with NodeJS, MongoDB and ReactJS.

I have a Task List where I add -(Task.create) with mongoose- to my project multiple tasks and I have a form with a button to delete those tasks, but I can't do it because I can't access to each task ID to delete it.

Here's my server:

(This is wrong, "task is not defined" but I don't know how to get each task id)

exports.delete_task= (req, res) => {

Task.findByIdAndDelete({tasks: task._id}, (err) =>{
    if(err){
        console.log(err);
    }
 })
};

Here's my (reactjs) Tasks Component

 import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTrashAlt, faEdit } from '@fortawesome/free-solid-svg-icons'

 import './Tasks.css';

 class Tasks extends Component {
    constructor(props) {
        super(props);
        this.state = {
            projectId: props._id,
            tasks: []
        };
    }

 componentDidMount() {
    fetch(`/dashboard/project/${this.props.projectId}/tasks`)
        .then(response => {
            return response.json()
        }).then(task => {
            this.setState({
                tasks: task.tasks
            })
        }).catch(error => console.error('Error:', error));
 }

 render() {

    const { tasks } = this.state;
    return (
        <div>
                <ul className="task-list">
                {tasks.map(task =>
                <li key={task._id}>{task.tasktitle} 

               <div>

              <form method='POST' action={`/dashboard/project/${this.props.projectId}/tasks/delete?_method=DELETE`}>
                 <button className="btn button--tasks" >
                    <FontAwesomeIcon icon={faTrashAlt} />
                 </button>
                </form>
                   </div>
                     </li>
                )}
                </ul>        
      </div>  
    );
  }
}

export default Tasks;

Here's an image of my task list, where I can ADD but can't DELETE it because I can't access to each task ID by clicking its own trash button..

Hope you can help me. Thank you so much!!

score 1 · Answer 1 · answered Oct 04 '18 at 17:37

1

You need to pass the task id as is findByIdAndDelete(taskId) which is same as findByIdAndDelete({'_id': task._id})

Task.findByIdAndDelete(task._id, (err) =>{
    if(err){
        console.log(err);
    }
 })
};

answered Oct 04 '18 at 17:37

Shivam Pandey

3,756
2
19
26

score 1 · Accepted Answer · answered Oct 04 '18 at 17:41

1

Do it like below. While doing .map pass task._id as query param to the path like below

{tasks.map(task =>
                <li key={task._id}>{task.tasktitle} 

               <div>

              <form method='POST' action={`/dashboard/project/${this.props.projectId}/tasks/delete?_method=DELETE&taskId=${task._id}`}>
                 <button className="btn button--tasks" >
                    <FontAwesomeIcon icon={faTrashAlt} />
                 </button>
                </form>
                   </div>
                     </li>
                )}


exports.delete_task= (req, res) => {

And here get the task id using req.query.taskId

Task.findByIdAndDelete({tasks: req.query.taskId}, (err) =>{
    if(err){
        console.log(err);
    }
 })
};

answered Oct 04 '18 at 17:41

Hemadri Dasari

32,666
37
119
162

Wow thanks! But now I receive a "Cannot POST /dashboard/project/5babee3bba94ea38bfbccd7f/tasks/delete" and my localhost is like this: http://localhost:5000/dashboard/project/5babee3bba94ea38bfbccd7f/tasks/delete?_method=DELETE?taskId=5bb621b5539ab614b51f8250 .. maybe I have something wrong in routes or something? – AFAF Oct 04 '18 at 17:50
May I know where do you get that error I mean front end or backend? – Hemadri Dasari Oct 04 '18 at 17:53
Not sure how form action works may be you need to specify path along with localhost:5000/dashboard in action – Hemadri Dasari Oct 04 '18 at 17:54
my bad, I was missing a letter. Thank you so much for your help!! – AFAF Oct 04 '18 at 18:10

Can't delete item using ReactJs MongoDB NodeJS

2 Answers2