Button refreshes page, and UseEffect not working-CodePudding

I have two buttons in my react.js project, when i click on the css should switch. To do this i have a onClick call to a function flip which changes the value of a state pathoButton from true to false (or vice versa). Then i have a useEffect that should only be run when pathoButton is changed and this alters the html. For some reason every time i click a button the whole page refreshes and im not sure what courses this. here is a snippet of some of the code.

where pathoButton is originally set

    const [userSettings, setuserSettings] = useState(
        {
            pathoButton: true,
        } 
    );

The two buttons which are pathologyButton and treatmentButton when the treatmentButton is clicked flip is called

return (
      <div className="input-group top-gap">
          <form className="form-length">
              <div className="input-group">
                <button className="pathologyButton">  <dt>Pathology</dt> </button>
                <button className="treatmentButton" onClick={()=>flip()}>  <dt>Treatment</dt> </button> 
              </div>
            <div className="svg-form">
                {displayAnimal()}
                  
            </div>
              
          </form>
          <form className='form-length'>
              <input type="Animal"  placeholder="Search by owner name or animal..." /> 
          </form>

      </div>
    );

flip and my use effect, i have tried window.location.reload(false); but it does not work

    function flip(e){
        window.location.reload(false);
        const pathoB = ! userSettings.pathoButton        
        setuserSettings((prevState) => {
            return { ...prevState, pathoButton: pathoB };
          });
    }

    useEffect(() => {
        console.log(userSettings.pathoButton, '<---log\n\n\n')
        if (userSettings.pathoButton) {
            return (<div> 
                <button className="pathologyButton" onClick={()=>flip()}>  <dt>Pathology</dt> </button>
                <button className="treatmentButton" onClick={()=>flip()}>  <dt>Treatment</dt> </button> 
            </div>)
        } else {
            return (<div>
                <button className="treatmentButton" onClick={()=>flip()}>  <dt>Pathology</dt> </button>
                <button className="pathologyButton" onClick={()=>flip()}>  <dt>Treatment</dt> </button> 
            </div>
            )
        }
    }, [userSettings.pathoButton])

Sorry if this is a repost of a question! i dont think it is but could be as im unsure what causes the page to refresh and any help or advice would be awesome!

CodePudding user response：

Try that.

const [userSettings, setuserSettings] = useState({pathoButton: true});

function flip(e){
  const pathoB = !userSettings.pathoButton    
  setuserSettings((prevState) => { ...prevState, pathoButton: pathoB });
}

function buttons() {
  if (userSettings.pathoButton) {
    return (
      <div> 
        <button className="pathologyButton" onClick={()=>flip()}> <dt>Pathology</dt> </button>
        <button className="treatmentButton" onClick={()=>flip()}> <dt>Treatment</dt> </button> 
      </div>
    )
  } else {
    return (
      <div>
        <button className="treatmentButton" onClick={()=>flip()}> <dt>Pathology</dt> </button>
        <button className="pathologyButton" onClick={()=>flip()}> <dt>Treatment</dt> </button> 
      </div>
    )
  }
}

return (
  <div className="input-group top-gap">
    <form className="form-length">
      {buttons()}
      <div className="svg-form">
        {displayAnimal()}
      </div>
    </form>
    <form className='form-length'>
      <input type="Animal"  placeholder="Search by owner name or animal..." /> 
    </form>
  </div>
);

So have the buttons returned by a function, since their order depend on a state.

Forget about the useEffect for that, since the click event already sets the state, which re-renders the component already.

Use a button type="button" to prevent the form submission... And never again use a window.reload unless you know that all other component states, Redux store and all you can think of will also reset and that is what you want.

CodePudding user response：

The default type attribute of a button is submit which means that when you use

<form>
  <button>test</button>
</form>

this button submits the form. Again, by default, without doing anything else, a form is submitted as GET so in your case, this gives you a reload.

If you do NOT want the buttons to submit the form, you have to specify type="button" on them:

<form>
  <button type="button">this does not submit the form</button>
</form>