Reactjs: page refreshing upon `onClick` handle of Button?

Yes! That did worked! If your react-app gets refreshed unexpectedly then, you should pass (e) as an event argument and then use e.preventDefault() in the function body which will prevent happen the default behavior of the onClick event.


You can prevent the default behavior as suggested by zerkms or

Just add type="button" in button tag.

Eg: this.showSomething('all')}>All


The default button action is to submit the form.

If you don't need that - you need to prevent that:

handleEntailmentRequest(e) {
    e.preventDefault();

    console.log("handle request ");
}

References:

  • MDN - Event.preventDefault()

The full solution for the issue of the page reloading will be:

<Button type="simpleQuery" onClick={(e) => {this.handleEntailmentRequest(e)}}>
   Query
</Button>


handleEntailmentRequest(e){
    e.preventDefault();
    //do something...

}