How to add delete button functionality to React app - reactjs

Question

I am new to React, and am having issues adding a way to delete items from the database. I have been trying a bunch of different things, but this is where I'm at at the moment.
Currently, I'm attempting to use a function
function DeleteBtn(props) {
return (
<span className="delete-btn" {...props} role="button" tabIndex="0">
Delete
</span>
);
}
Combined with the button itself
<DeleteBtn onClick={() => this.deleteMusic(props.music._id)} />
and have tried adding routes for deletion in my backend server.js file, but as of right now, I have created a seperate component that I am trying to add delete functionality to. This is the entire file:
import axios from 'axios';
export default {
deleteMusic: function(id) {
return axios.delete('/pieces/' + id);
}
};
I am positive there are much better ways to go about doing this, but I am stuck and having difficulty finding answers in other posts.
There error I am currently getting is a TypeError within the onClick function. "Cannot read property 'deleteMusic' of undefined.
Any help would be greatly appreciated!
EDIT: As for the database, I am using MongoDB with Mongoose.
Within server.js on the backend, I've tried several different versions of Mongoose .remove targeting the id of the entry at hand. I have also tried a handful of different ways to delete the entry within the component itself, combined with the route on the backend, all with zero success.
EDIT: Backend server.js
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const musicRoutes = express.Router();
const PORT = 4000;
let Music = require('./music.model');
app.use(cors());
app.use(bodyParser.json());
mongoose.connect('mongodb://127.0.0.1:27017/music', { useNewUrlParser: true });
const connection = mongoose.connection;
connection.once('open', function() {
console.log('MongoDB database connection established successfully');
});
musicRoutes.route('/').get(function(req, res) {
Music.find(function(err, pieces) {
if (err) {
console.log(err);
} else {
res.json(pieces);
}
});
});
musicRoutes.route('/:id').get(function(req, res) {
let id = req.params.id;
Music.findById(id, function(err, music) {
res.json(music);
});
});
musicRoutes.route('/update/:id').post(function(req, res) {
Music.findById(req.params.id, function(err, music) {
if (!music) res.status(404).send('data is not found');
else
music.music_description = req.body.music_description;
music.music_composer = req.body.music_composer;
music.music_class = req.body.music_class;
music.music_title = req.body.music_title;
music.save()
.then(music => {
res.json('Music updated!');
})
.catch(err => {
res.status(400).send('Update not possible');
});
});
});
musicRoutes.route('/add').post(function(req, res) {
let music = new Music(req.body);
music.save()
.then(music => {
res.status(200).json({ music: 'New music added successfully' });
})
.catch(err => {
res.status(400).send('Adding new music failed');
});
});
musicRoutes.route('/delete').delete(function(req, res) {
let id = req.params.id;
Music.findByIdAndRemove(id).exec();
res.redirect('/');
});
app.use('/pieces', musicRoutes);
app.listen(PORT, function() {
console.log('Server is running on Port: ' + PORT);
});

Answer 1

Can you define DeleteButton component as shown below?
const API_URL = 'https://yourserverurl';
const DeleteButton = ({ id }) => (
<span
className="delete-btn"
role="button"
tabIndex="0"
onClick={() => axios.delete(`${API_URL}/pieces/${id}`)}
>
Delete
</span>
);
And you can use it like this.

Answer 2

You are using delete as a route and you don't have an id parameter on that route.
So
musicRoutes.route('/delete').delete(function(req, res) {
let id = req.params.id;
Music.findByIdAndRemove(id).exec();
res.redirect('/');
});
should, either be
musicRoutes.route('/delete/:id').delete(function(req, res) {
let id = req.params.id;
Music.findByIdAndRemove(id).exec();
res.redirect('/');
});
and you should call
export default {
deleteMusic: function(id) {
return axios.delete('/pieces/delete' + id);
}
};
or, you should just remove delete from your route
musicRoutes.route('/:id').delete(function(req, res) {
let id = req.params.id;
Music.findByIdAndRemove(id).exec();
res.redirect('/');
});