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

Question

I have the following block inside my render() (which is a Bootstrap Button: https://react-bootstrap.github.io/components.html#buttons-options):

&         


        

Answer 1

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()

Answer 2

You can prevent the default behavior as suggested by zerkms or

Just add type="button" in button tag.

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

Answer 3

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...

}

Answer 4

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.