getting button value in onChange event

Question

I am trying get the button value in a onChange event.Later I will have to bind the value to state. But I am getting an empty value.

<button onChange={this.handleCategoryName}  onClick={this.goToNextPage}>
    Restaurant
</button>

This is the event where I am trying to get the value "Restaurant"

handleCategoryName(event) {  this.setState({ categoryName:event.target.innerHTML });   }

and it's state where I will bind the button value.

this.state = {
    apiUrl: config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,
    value: 850,
    categoryName: " ",
};
this.handleCategoryName = this.handleCategoryName.bind(this);

But I am getting an empty value in my database.

axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
            'categoryName':this.state.categoryName,
           }

How can I solve it?

Answer 1

The problem is that buttons can't have a onChange property. Why? Because buttons don't have a field to change with. All the elements in HTML who can be used with a onChange property have a field. When they change, it can trigger something. Buttons just have plain text that explains it or nothing at all if you don't need text on the buttons and the text can't change without doing some fancy functions. Even though buttons can click, you can't directly use the onChange property with them. The onChange property is the onClick property with buttons. So I suggest that the onChange event property should be removed and replaced with something else.