How to fix Cannot read property 'delete' of undefined - node.js

Question

im learning create fullstack apps and i have a problem with delete the record from database backend request work however, I can't add a button that will trigger removal
const Todo = props => (
<tr>
<td className={props.todo.todo_completed ? 'completed' : 'TableText'}>{props.todo.todo_description}</td>
<td className={props.todo.todo_completed ? 'completed' : 'TableText'}>{props.todo.todo_responsible}</td>
<td className={props.todo.todo_completed ? 'completed' : 'TableText'}>{props.todo.todo_priority}</td>
<td className="TableTitle">
<Link to={"/edit/"+props.todo._id} className="a_edit"><img src={edit} alt="Edytuj" className="favicon"/></Link>
<button onSubmit={this.delete}>Usunięcie</button>
</td>
</tr>
)
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
this.state = {todos: []};
}
delete(){
axios.get('http://localhost:4000/todos/delete'+this.props.obj._id)
.then(console.log('Deleted'))
.catch(err =>console.log(err))
}
there is a delete method:
constructor(props) {
super(props);
this.OnRemoveTodo = this.OnRemoveTodo.bind(this);
this.state = {todos: []};
}
OnRemoveTodo(){
axios.get('http://localhost:4000/todos/delete'+this.todo._id)
.then(console.log('Deleted'))
.catch(err =>console.log(err))
}
there is changed const Todo:
const Todo = props => (
<tr>
<td className={props.todo.todo_completed ? 'completed' : 'TableText'}>{props.todo.todo_description}</td>
<td className={props.todo.todo_completed ? 'completed' : 'TableText'}>{props.todo.todo_responsible}</td>
<td className={props.todo.todo_completed ? 'completed' : 'TableText'}>{props.todo.todo_priority}</td>
<td className="TableTitle">
<Link to={"/edit/"+props.todo._id} className="a_edit"><img src={edit} alt="Edytuj" className="favicon"/></Link>
<button onSubmit={props.OnRemoveTodo}><img src={trash} alt="Usuń" className="favicon"/></button>
</td>
</tr>
)
and here is the backend code to which I am trying to appeal
todoRoutes.route('/delete/:id').get(function (req, res) {
Todo.findByIdAndDelete(req.params.id, function(err, todo) {
if(err) res.json(err);
else res.json('Successfully removed');
});
});

Answer 1

there is no this.delete method.
you are using functional component.
i thing you forgot to use props.delete
const Todo = props => (
<tr>
<td className={props.todo.todo_completed ? 'completed' : 'TableText'}>{props.todo.todo_description}</td>
<td className={props.todo.todo_completed ? 'completed' : 'TableText'}>{props.todo.todo_responsible}</td>
<td className={props.todo.todo_completed ? 'completed' : 'TableText'}>{props.todo.todo_priority}</td>
<td className="TableTitle">
<Link to={"/edit/"+props.todo._id} className="a_edit"><img src={edit} alt="Edytuj" className="favicon"/></Link>
<button onSubmit={props.delete}>Usunięcie</button>
</td>
</tr>