Javascript class instance method does not work with onClick callback event in react

I was trying to update my state variable when the button is clicked on my page. But I see that I cannot use react class component methods. Here is the minimum reproducible example.

import React, { Component } from 'react'

export class Name extends Component {
    constructor(){
        super();
        this.state = {
            name : "Farhan Ahmed"
        }
    }
    clickMe() {
        this.setState({
            name:"Ahmed Farhan"
        })
    }

    render() {
        return (
            <div>
                <h1>{this.state.name}</h1>
                <button className="btn btn-success" onClick={this.clickMe}>Change Text</button>
            </div>
        )
    }
}

export default Name

Error :

TypeError: Cannot read properties of undefined (reading 'setState')

But when I replace the same with arrow function it works for me.

My question is why didn’t regular class method work in this case why do I need to replace the same with arrow function?

Answer

In the docs found here https://reactjs.org/docs/handling-events.html this error is explained, along with possible solutions. If you’re not using the experimental “public class fields syntax” the docs refer to, you can either bind your function, or use an arrow function:

With bind

onClick={this.clickMe.bind(this)}

Arrow function

onClick={() => this.clickMe()}

These are the most common (that I’ve seen personally), but the docs provide more solutions as well.

Edit

Someone pointed out that OP is asking “why”, not necessarily “how do I fix it?” So from the docs linked above:

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.