I am asking this question out of curiosity. I want to get the value of an element that fires an event in REACT when I bind the event handler using the arrow function in es6 Class-Based Component

//event handler function
clickHandler() {
  console.log(this.textContent);
}

//the JSX Component element
<div className="first-row d-flex">
   <button
     className="button flex-child"
     data-id="AC"
     type="button"
     onClick={() => this.clickHandler()}>
        someText
    </button>
 </div>

I intend to get its value or textContent like, in the case below, using this bind to the event handler.

//event handler function
clickHandler() {
  console.log(this.textContent);
}

//the JSX Component element
<div className="first-row d-flex">
   <button
     className="button flex-child"
     data-id="AC"
     type="button"
     onClick={this.clickHandler.bind(this)}>
        someText
    </button>
 </div>

Is there a way to do this??