user3183586
user3183586

Reputation: 167

React JS How to submit a form and THEN navigate to new page?

I want to preface this by saying I am completely brand new to web development and am trying to add features to legacy code (and honestly I am not sure what the entire tech stack is)! Thank you for any insight you can provide.

I had this form that was originally like this:

render={fieldRenderProps => {
  const {
    rootClassName,
    className,
    formId,
    handleSubmit,
    inProgress,
    invalid,
    intl,
    img1,
    onOpenTermsOfService,
    values,
  } = fieldRenderProps;

...

  return (
    <Form className={classes} onSubmit={handleSubmit}>

I wanted to change it to not only submit and close the signup form but also then navigate to the about us page

So I changed it to this:

  const handleSubmit2 = async (event) => {
    event.preventDefault(); // Prevent the default form submission behavior
    await fieldRenderProps.handleSubmit(); // Wait for form submission to complete
    if (!props.inProgress) { // Check if inProgress state is finished
      history.push('/about'); // Use history.push to navigate without full page reload
    }
  };

...

  return (
    <Form className={classes} onSubmit={handleSubmit2}>

Originally with this form you would click continue and it would log you in: enter image description here

Now it goes to the new page, now with all the inputs of the form empty and the continue in the inprogress state. Finishes logging in and then closes on the new page.

How can I change the code so it finishes logging in/signing up and closes on the initial page with the form and THEN navigate to about us.

I don't know if this is relevant but in visual code if I highlight handlesubmit and go to definition it takes me to a file called index.d.ts and has this in it:

export interface FormRenderProps<
  FormValues = Record<string, any>,
  InitialFormValues = Partial<FormValues>,
> extends FormState<FormValues, InitialFormValues>,
    RenderableProps<FormRenderProps<FormValues>> {
  form: FormApi<FormValues>;
  handleSubmit: (
    event?: Partial<
      Pick<React.SyntheticEvent, "preventDefault" | "stopPropagation">
    >,
  ) => Promise<AnyObject | undefined> | undefined;
}

I am really having trouble deciphering this code and if it is even really the sign up "handleSubmit" or something else.

Upvotes: 0

Views: 140

Answers (0)

Related Questions