this.props.xxx is not a function - reactjs

Question

I've found a few other posts with similar errors and I've already ruled out:
The function is correctly imported in curly braces
The action is dispatched
The file path is correct
It must just be some silly mistake but Ive been looking at it for ages and cannot seem to find it, and help appreciated!
action:
export const deleteRow = (rowId) => (dispatch) => {
dispatch({ type: "LOADING_UI" });
axios
.delete(`/row/${rowId}`)
.then((res) => {
dispatch({
type: "DELETE_ROW",
payload: res.data,
});
dispatch(clearErrors());
})
.catch((err) => {
dispatch({
type: "SET_ERRORS",
payload: err.response.data,
});
});
};
component:
export class MyDelete extends Component {
state = {
open: false,
};
handleOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
handleDelete = () => {
this.props.deleteRow(this.props.rowId);
this.setState({ open: false });
};
render() {
return (
<Fragment>
<Button onClick={this.handleOpen}>
<HighlightOffIcon color="primary" />
</Button>
<Dialog
open={this.state.open}
onClose={this.handleClose}
fullWidth
maxWidth="sm"
>
<DialogTitle>Are you sure you want to delete this row ?</DialogTitle>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Cancel
</Button>
<Button onClick={this.handleDelete} color="secondary">
Delete
</Button>
</DialogActions>
</Dialog>
</Fragment>
);
}
}
MyDelete.propTypes = {
deleteRow: PropTypes.func.isRequired,
rowId: PropTypes.string.isRequired,
};
export default connect(null, { deleteRow })(MyDelete);

Answer 1

You are using connect with object shorthand form, it expects each field to be an action creator, and binds each field to dispatch.
Your function deleteRow is not an action creator, so instead you should not use object shorthand form and directly use dispatch:
export class MyDelete extends Component {
//...
deleteRow = (rowId) => {
this.props.dispatch({ type: "LOADING_UI" });
axios.delete(...)
}
//...
}
export default connect()(MyDelete);

Answer 2

Try using the mapDispatchToProps function approach instead of object shorthand form like so :-
const mapDispatchToProps = (dispatch) =>{
return {
deleteRow:(rowId)=>dispatch(deleteRow(rowId));
}
}
export default connect(null, mapDispatchToProps)(MyDelete);