Search code examples
reactjsformikstepper

Formik stepper props+hooks between steps

I am trying to pass data in a component to another component, which are siblings to one another.But they are in a Formik Stepper with Formik Hook(rff).

index.js -> is entry point, that calls only one component App, as we have no route
App.js -> this the parent component, which has two child, Step1 and Step2
Step1.js -> takes input
Step2.js -> renders data from Step1

I made a simple example code here the link

https://codesandbox.io/s/keen-germain-formikstepper-xntko?file=/src/

  • Note that I don't want to put all formik initialValues in the main formik stepper component because In my real project I have a lot of values at step 1 and step 2 and I have there more steps in the stepper with more values,
Solution

  • This is the answer -

    import React from "react";
import { useFormikContext } from "formik";
export default function Step2() {

const{values} =  useFormikContext()
return <p>{values.firstName} </p>;
}

    full solution https://codesandbox.io/s/keen-germain-formiksteppersol-xntko?file=/src/App.tsx