Argument of type 'NextRouter' is not assignable to parameter of type 'Props'

Question

I have a component where i am initializing my formik form by calling a function and sending router object of next/router as below

export default function Reset() {
  const router = useRouter();
  const formik = useFormik(RecoverForm(router));
  return (
          <form
            onSubmit={formik.handleSubmit}
          >
                <PlainInput
                  type="email"
                  name="email"
                  formik={formik}
                />

              <Button text="Send Email" type="submit" />
          </form>
  );
}

i am tring to send router object in Recoverform function which initialize formik and helps to navigate after successfull submittion of form

The line const formik = useFormik(RecoverForm(router)); gives the following error

Argument of type 'NextRouter' is not assignable to parameter of type 'Props'. Property 'router' is missing in type 'NextRouter' but required in type 'Props'.ts(2345)

here is my code below for the function which generates the form and takes router object to navigate between the urls

import { NextRouter } from "next/router";
import { schema } from "./recover-schema";
interface Props {
  router: NextRouter;
}
export const RecoverForm = (router: Props) => ({
  initialValues: {
    email: null,
  },
  onSubmit: (values: any) => {
    router.push("/account/login");
    // Do something with the form values
  },
  validationSchema: schema,
});

It throws error

Property 'push' does not exist on type 'Props'.

Answer 1

you have two errors. the easiest way is to solve Argument of type 'NextRouter' is not assignable to parameter of type 'Props'. Property 'router' is missing in type 'NextRouter' but required in type 'Props'.ts(2345):

export const RecoverForm = (router: NextRouter) => ({

and remove the interface Props.

but in the future, you might want to add more parameters, so you can keep your interface Props, but use object destructuring and fix your RecoverForm call:

const formik = useFormik(RecoverForm({ router }));

export const RecoverForm = ({ router }: Props) => ({