How do you use it with formik?

[fddayan]

I'm building a multi step form and on each step I need to validate different fields. The problema I'm finding is that I have to wrap te steps outside the Wizard component and I need to load formik inside the Wizard component to have access to the activeStep, like

 <Wizard>
      <Formik
        initialValues={{
          firstName: '',
          lastName: '',
          email: '',
          password: '',
          username: '',
          phoneNumber: '',
        }}
        validationSchema={SignUpValidations[activeStep]} # I know it'I have not used useWizard to get this value, I can wrap that later,  but you get the ide.
        onSubmit={handleOnSubmit}
      >
        {() => (      
          <>
            <StepOne />
            <StepTwo />
          </>      
        )}
      </Formik>
    </Wizard>

with formik I used to do:

const stepsValidations = [
  StepOneSchema, 
  StepTwoSchema,
]

<Formik 
    validationSchema={stepsValidations[steps]}
   ....
``

any solution to this?

[devrnt]

Hi, thanks for creating this issue. Any reason why you don't wrap <Formik /> around every <Step />?

[fddayan]

yes, because it's a big form that should submit at the end. Each formik for each step cannot share data, right?

[jonra1993]

Hello, @fddayan did you were able to use formik wizard. I am trying to do something similar If you have any recommendations it can be really helpful?

[Thremulant]

@jonra1993 @fddayan I'll suggest adding a Context to store all the data and wrap your Wizard with it. Then each of your steps will be its own Formik form.
I've found that using that approach allows me to better control the validation of the forms, and in your case, you can validate based on the step too.
In each Formik form, you can use the onSubmit to update the context and move a step in the wizard. And in your last form, grab all the data from the context + the last form to create a single payload to your endpoint.

[devrnt]

See #119 (comment)