title: Express Router Delete
body: <p>I've written a simple "Grocery List" web application using the MERN stack (Mongo, Express, React, Node). The issue that I'm having is that my DELETE REST command is not firing unless I reload the page. Below is the source code for my event handler and the backend.</p>
  
  <p><strong>Event Handler</strong></p>
  
  <pre><code>handleRemove(e) {
          fetch('http://localhost:3001/list/' + e._id, {
              headers: {
                  "Access-Control-Allow-Credentials": true,
                  "Access-Control-Allow-Origin": "*",
                  "Content-Type": "application/json"
              },
              method: "DELETE",
              body: e
          })
          this.refs.list.forceUpdate();
      }
  </code></pre>
  
  <p><strong>Express Backend</strong></p>
  
  <pre><code>router.delete('/list' +'/:id',function(req,res) {
          item.remove({
              _id: req.params.id
          }, function(err) {
              if(err) {
                  res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
                  res.header("Access-Control-Allow-Methods", "PATCH, POST, GET, PUT, DELETE, OPTIONS");
                  res.header("Access-Control-Allow-Methods", "POST, GET, DELETE");
                  res.header("Access-Control-Allow-Credentials", "true");
                  return res.send(err);
              } else {
                  console.log("successfully deleted")
              }
          })
      })
  </code></pre>
  
  <p><strong>OnClick</strong></p>
  
  <pre><code>&lt;button onClick={() =&gt;
            this.props.handleRemove(item)}
            className="item" key={item._id + "btn"}&gt;Remove&lt;/button&gt;
  </code></pre>
  
  <p>Link to my repo
  <a href="https://github.com/ahahn95/GroceryList" rel="nofollow noreferrer">https://github.com/ahahn95/GroceryList</a></p>