referesh page after submission

[amirhbakan]

Hi, I have implemented a form that works properly and when I submit the form, I call an Axios request. after that refreshes the whole page! I have added prevent default and it doesn't prevent that. what's wrong with that? I haven't change sth in redux or states in upper components. and I put a console.log in the first line of the App component function and after form submits, that prints. it shows that page reloads, if I'm not wrong, please tell me how I can prevent page reloading, thanks.

[michael-land]

without code i'm guessing you didn't wrap your submit handler with form#handleSubmit onSubmit={form.handleSubmit(()=>{ ...logic })}

[amirhbakan]

thanks for your reply.
this is my code, I have handler that you said.

function SetPasswordForm({ userData, token, ...props }) {
  const { register, handleSubmit, errors, watch } = useForm();
  const password = watch("password", "");

  const { pending, request } = useAPI(api.user.setPassword, "LOGIN");

  function handleSetPassword(data) {
    request({ token, ...data }).then(() => props.setPassword);
  }

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        handleSubmit(handleSetPassword)();
      }}
    >
      <UserDataBox
        className="mt-15"
        mobilePhone={userData.mobilePhone}
        companyName={userData.companyName}
      />

      <PasswordField
        name="password"
        ref={register({
          required: { value: true, message: errorMessages.required },
          minLength: {
            value: 6,
            message: errorMessages.minLengthPassword(6),
          },
        })}
        error={errors?.password?.message}
      />
      <PasswordField
        name="confirmPassword"
        ref={register({
          required: { value: true, message: errorMessages.required },
          minLength: {
            value: 6,
            message: errorMessages.minLengthPassword(6),
          },
          validate: (value) =>
            value === password || errorMessages.passwordsNotMatch,
        })}
        error={errors?.confirmPassword?.message}
      />
      <div>
        <Button color="green" size="medium" wide>
          submit
        </Button>
      </div>
    </form>
  );
}

[michael-land]

umm, I don't see any problem in your code. this CSB with same submit logic does not refresh page after submit

https://codesandbox.io/s/material-demo-forked-wy9jv?file=/demo.tsx:156-181

[amirhbakan]

oops, I have founded my problem, I have changed store after submission, because of login action. thanks for your help.