Bizarre warnings when adding onClick handler to button

[jeghers]

After adding a click handler to a button, these warnings now fill the console with every click:

Warning: isMounted(...) is deprecated in plain JavaScript React classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.
Warning: replaceState(...) is deprecated in plain JavaScript React classes. Refactor your code to use setState instead (see facebook/react#3236).

Here is the render code:

onClick() {
console.log('onClick - this...');
console.log(this);
}

render() {
console.log('this.props.about...');
console.log(this.props.about);
return (

{this.renderUserList()}
<button onClick={() => this.onClick()}> Increment 
  Count is {this.props.about.counter}

);
}

(I was forced to use the arrow function for onClick in order to get a this pointer in the handler function)

[jeghers]

Note: this happens in IE but not Chrome

[wellyshen]

@jeghers

I guess onClick isn't the main reason for causing this warning. Have you used any out of updated 3rd party library or used the isMounted() method? See here for more information.

If I were you I will write the function as below :

handleOnClick = () => {
  console.log('onClick - this...');
  console.log(this);
}

render() {
  return <button onClick={this.handleOnClick} />;
}