onClick call from within function

[eamonnmcelroy]

I have the following code:

class ModelsSearch extends CustomTable {

    constructor(props) {
        super(props);   
        this.handleDelete = this.handleDelete.bind(this); 

        this.columns = [
            { width: "5%", path: "id", title: "ID", sort: true, isKey: true},
            { width: "10%", path: "name", title: "Name"},
            { width: "20%", path: "description", title: "Description"},
            { width: "10%", path: "", title: "Actions" , dataFormat: this.modelActions }
        ];
    }

    handleDelete() {
      console.log("On Click Worked");
    }

    modelActions(cell, row, extra, index){
      return (
        <div>
          <Button
            href={"/admin/models/"+_.get(row, "id")+"/edit"}
            bsStyle="default"
            title="Edit">
              <Glyphicon title="Edit" glyph="edit" />
          </Button>
          {_.get(row, "used") === true ?
            <Button
              href={"#"}
              bsStyle="default"
              title="Active: Model in Use">
              <Glyphicon glyph="lock" />
            </Button>
            :
            <Button
              bsStyle="default"
              onClick={ this.handleDelete }
              title="Delete">
              <Glyphicon title="Delete" glyph="trash" />
            </Button>
          }
        </div>
      );
    }

    render() {
        return (
          <div>
            <BootstrapTable data={ this.props.data }
                            remote={ true }
                            striped={true}
                            hover={true}
                            height={ 'auto' }
                            pagination={ true }
                            fetchInfo={ { dataTotalSize: this.props.totalDataSize } }
                            options={ {
                                sizePerPage: this.props.sizePerPage,
                                withFirstAndLast: false,
                                sizePerPageList: [ 5, 10, 20 ],
                                page: this.props.currentPage,
                                onPageChange: this.props.onPageChange,
                                onSortChange: this.props.onSortChange,
                                onFilterChange: this.props.onFilterChange,
                                noDataText: this.noDataText()
                            } }>
                {this.renderTableColumns()}
            </BootstrapTable>
          </div>
        );
    }
}

I am having considerable difficulty with the onClick call for handleDelete. When I try with the above code I get Uncaught TypeError: this.handleDelete is not a function. I've tried a number of different approaches such as the following changes:

onClick={() => this.handleDelete()} revenueModelActions = (cell, row, extra, index) => {

but as yet have been unable to get it working. Any advice is appreciated.

[krunal29385]

I got the same problem do you get any solution?