How to perform async opeartion in antd Modal component?

Question

import {Button, Modal} from 'antd';

const confirm = Modal.confirm;

class MeetupDetail extends Component {
    showDeleteConfirm() {
    confirm({
      title: 'Are you sure delete this meetup?',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        this.onDelete();
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

onDelete() {
    let meetupId = this.state.details.id;
    axios.delete(`http://localhost:3000/api/meetups/${meetupId}`)
      .then(response => {
        this.props.history.push('/');
      })
      .catch(err => console.log(err));
  }

    render(){
        return(
  <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: '20px' }}>
          <Button type="primary" icon="edit">Edit</Button>
          <Button onClick={this.showDeleteConfirm.bind(this)} type="danger" icon="delete">Delete</Button>
        </div>
        ) 
    }
}

Passing this.onDelete.bind(this) as an Onclick for the Button delete will work. But i want to show a modal before deleting the item and i used Modal component of antd ui framework. After showing a model when i choose Yes option it raises an error, TypeError: Cannot read property 'onDelete' of undefined

Answer 1

try this:

confirm({
  ...
  onOk: () => {
    this.onDelete();
  },
});