Click Event Refresh My Page

so I try to trigger a filter method using the following button. But problem is that when I click it, it will automatic refresh my page. I fetch my needed data from my backend and s

Solution 1:

Could you please try this :

first pass event with click :

<button type="submit" onClick={(e) =>this.getBeerByName('NL',e)} >Submit</button>

then add e.preventDefault() like this

 getBeerByName = (input,e) =>{
     e.preventDefault()
     let newArray = this.state.beers.filter(function (el){
         return el.name===input;
     });

     this.state.beers = [...newArray];
 }

or change button type to button like this

 <button type="button" onClick={() =>this.getBeerByName('NL')} >Submit</button>

without e.preventDefault in getBeerByName

Solution 2:

Perhaps an

e.preventDefault();

somewhere at the end of getBeerByName would do what you like, but I'm not familiar with React, so you could give it a try.