Я работаю с приложением Event Crud с реакцией. js и получаю эту ошибку:
Ошибка типа: this.props.onDelete не является функцией
Это пользовательский интерфейс: 
И это ошибка, когда я нажимаю на кнопку удаления:
и я получаю ту же ошибку, когда нажимаю на кнопку edit.
Вот код:
import React, { Component } from "react";
class Event extends Component {
onDelete = () => {
// console.log('event ', this.props.event.id);
this.props.onDelete(this.props.id);
};
onEdit = () => {
// console.log('event ', this.props.event.id);
this.props.onEdit(this.props);
};
render() {
const { id, eventname, eventdescription } = this.props.event;
return (
<tr>
<td>{id}</td>
<td>{eventname}</td>
<td>{eventdescription}</td>
<td>
<button onClick={this.onEdit}>Edit</button>
<button onClick={this.onDelete}>Delete</button>
</td>
</tr>
);
}
}
export default Event;
Это DisplayEvent. js file
import React, { Component } from 'react';
import Event from './Event';
import axios from 'axios';
class DisplayEvent extends Component {
constructor(props) {
super(props);
this.state = { value: '', loading: true, events: [] }; // use array here
}
componentDidMount() {
this.setState({ loading: true });
axios
.get('http://127.0.0.1:8000/api/events')
.then(response => {
this.setState({ events: response.data, loading: false });
})
// .catch(function(error) {
// console.log(error);
// this.setState({loading: false});
// });
.catch((error) => { console.log(error); this.setState({loading: false}); });
}
render() {
const { events, loading } = this.state; // get events from the state
return (
<div>
<h1>Events</h1>
<table className="table table-hover">
<thead>
<tr>
<td>ID</td>
<td>Event Name</td>
<td>Event Description</td>
<td width="200px">Actions</td>
</tr>
</thead>
<tbody>
{loading ? (
<tr>
<td>
<h1>Loading events...</h1>
</td>
</tr>
) : (
events.map(event => {
return <Event key={event.id} event={event} onDelete={this.onDelete} onEdit={this.onEdit} />;
})
)}
</tbody>
</table>
</div>
);
}
}
export default DisplayEvent;
В чем здесь проблема?