Can't see attached event function but noop

Question

The problem is that although I have attached events (e.g. handleClear) in the class below, however, when I check the onClick event in the button dom, it shows an empty method noop() {} instead. As a result, it can't clear as expected.

The strange thing is that sometimes if I set breakpoints, the handler method would be there. I suspect the event attachment is related to the timing. But I can't identify when and where it misses to attach the event function. Could anyone provide some tips on resolving this? Or provide some insights?

class ClearHistory extends PureComponent {

    handleCancel = () => {
        console.log('handleCancel');
    }

    handleClear = (event) => {
        console.log('handleClear');
    }

    render() {

        return (
            <div>
                <Button key='cancel' type='button' onClick={this.handleCancel} >
                    Cancel
                </Button>
                <Button key='remove' type='button' onClick={this.handleClear} >
                    Clear
                </Button>
            </div>
        );
    }
}

Answer 1

I created sandbox to test your component, and I renamed to a html tag because the component without any ui-library.

https://codesandbox.io/s/clearhistory-fq69b?file=/src/ClearHistory.js

It works but:

This is fine because the react itself takes care of the event binding.

https://the-guild.dev/blog/react-dom-event-handling-system