Pass values from a Formik Wizard step to the parent component the wizard is used in (React)

Viewed 894

I am working in React with a Formik Multistep wizard based on the example provided here: https://github.com/formium/formik/blob/master/examples/MultistepWizard.js, snippet in question shown here:

  return (
    <Formik
      initialValues={snapshot}
      onSubmit={handleSubmit}
      validationSchema={step.props.validationSchema}
    >
      {formik => (
        <Form>
          <p>
            Step {stepNumber + 1} of {totalSteps}
          </p>
          {step}
          <div style={{ display: "flex" }}>
            {stepNumber > 0 && (
              <button onClick={() => previous(formik.values)} type="button">
                Back
              </button>
            )}
            <div>
              <button disabled={formik.isSubmitting} type="submit">
                {isLastStep ? "Submit" : "Next"}
              </button>
            </div>
          </div>
          <Debug/>
        </Form>
      )}
    </Formik>
  );
};

const WizardStep = ({ children }) => children;

On line 56 of the example, you can see that the various wizard steps are passed in as children using: {step} (WizardStep is defined on line 76). In my code, both Wizard and WizardStep are exported from the file they are in and then properly imported into the parent component I am using the wizard in.

My issue is this: I want to have a checkbox in the parent component, and if checkbox value is true, render another component. However, I cannot seem to access the Formik values in the parent component. Something similar to this: {formik.values.checkboxName ? <DealerForm /> : null}

I am familiar with the Formik connect() HOC and the useFormikContext() hook, but neither of these are successful in providing access to the Formik values when applied to the parent component before the wizard has been called. I am also aware I could use the connect() HOC in another component set up specifically for this checkbox, but I have been asked to pull the props from the wizard to the parent component instead.

I have also reviewed and tested these stackoverflow questions that are of a similar nature, without success: Access Formik's values outside of component | React, How to pass values from a component into Formik multi-step form wizard?

1 Answers

For anyone else who is researching this subject, I ended up using the Formik connect() HOC in another component set up specifically for this checkbox, as no other solution was found. It works as expected and in my opinion is a clean solution.

Related