Delete item from MongoDB using React, Redux and Express

Question

I'm trying to delete an order line from my MongoDB database using React, Redux and Express/Node but I'm getting the following error in my console:

VM118:1 DELETE http://localhost:3000/api/meals/:id/jp4PaZve3 404 (Not Found)

I'm not sure why it's pointing to port 3000, when my local server is running on 5000?

In my server file, I have the following delete endpoint created in Express

app.delete("/api/meals/:id", async (req, res) => {
  const deletedMeal = await Meal.findByIdAndDelete(req.params.id);
  res.send(deletedMeal);
});

In my redux actions I have the following (I'm not sure if this is correct):

export const deleteMeal = (id) => async (dispatch) => {
  await fetch("/api/meals/:id/" + id, {
    method: "DELETE",
  });
  dispatch({
    type: DELETE_MEAL,
    payload: id,
  });
};

My UpdateMenu screen is as follows:

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchMeals, deleteMeal } from "../actions/mealActions";

class UpdateMenuScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      meal: null,
    };
  }

  componentDidMount() {
    this.props.fetchMeals();
  }

  deleteMeal(id) {
    this.props.deleteMeal(id);
  }

  render() {
    return (
      <div>
        <h3>Current Menu</h3>
        {!this.props.meals ? (
          <div>Loading...</div>
        ) : (
          <ul className="meals">
            {this.props.meals.map((meal) => (
              <li key={meal._id}>
                <div className="meal">
                  <p>{meal.title}</p>
                  <button
                    className="button"
                    onClick={() => this.props.deleteMeal(meal._id)}
                  >
                    Delete
                  </button>
                </div>
              </li>
            ))}
          </ul>
        )}
        <button>Add New Menu Item</button>
      </div>
    );
  }
}

export default connect((state) => ({ meals: state.meals.items }), {
  fetchMeals,
  deleteMeal,
})(UpdateMenuScreen);

When I try and run my delete method in Postman however, it doesn't work. Can anyone see what I'm doing wrong?

VersifiXion · Accepted Answer · 2020-11-19 19:08:41Z

1

In your deleteMeal action, you have to put the id in the URL dynamically with template strings,

await fetch("/api/meals/:id/" + id

1) it's equal to /api/meals/:id/id but according to your backend it should be /api/meals/:id
2) and you have to put the whole URL like http://localhost:5000/api/meals/${id} cause if you don't put the base, it will do a request on the port of your client so 3000

///////

So instead of :

export const deleteMeal = (id) => async (dispatch) => {
  await fetch("/api/meals/:id/" + id, {
    method: "DELETE",
  });
  dispatch({
    type: DELETE_MEAL,
    payload: id,
  });
};

try this :

export const deleteMeal = (id) => async (dispatch) => {
  await fetch(`http://localhost:5000/api/meals/${id}/`, {
    method: "DELETE",
  });
  dispatch({
    type: DELETE_MEAL,
    payload: id,
  });
};

answered Nov 19, 2020 at 19:08

VersifiXion

2,2927 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

smose Over a year ago

Thank you! I've ended up using await fetch(/api/meals/${id}/ as I think the server port is getting confused as I have previously pushed this application to heroku, but this is working how I need to now

smose Over a year ago

I've noticed now that when I delete an item, the page doesn't reload to show the remaining items in the list of fetchMeals, it displays <div>Loading...</div> instead which should only show when the meals prop is empty. Do you know why this might be? If I navigate to a different page, then come back, the whole list renders again. I've tried calling my fetchMeals request after inside my deleteMeal function like follows: deleteMeal(id) { this.props.deleteMeal(id); this.props.fetchMeals(); }

VersifiXion Over a year ago

@smose if you want we can speak in a private chat

VersifiXion Over a year ago

@smose I created a room here chat.stackoverflow.com/rooms/224862/…

smose Over a year ago

@Versification sorry I didn't see your chat room in time, I've solved this now by adding in componentDidUpdate(){ this.props.fetchMeals()}

Collectives™ on Stack Overflow

Delete item from MongoDB using React, Redux and Express

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related