Dynamic Formik Form Data population throwing controlled input error

Question

I have created two dynamic forms A and B in Formik each having pre-populated data from Atype Btype keys from the JSON and can be viewed with radio buttons at the top. The validations and initialization of first form works well for the initial load of page. However when I toggle the view to second form, it gets initialized with data of first form and validations fail as well.Attaching the sandbox url for proper undesratnding.Please help. Atching sandbox url https://codesandbox.io/s/frosty-voice-9i93v?file=/index.js

Shubham Verma Shubham Verma · Accepted Answer · 2020-08-25T11:53:44

You need to pass enableReinitialize inside formik field. Othewise when formik component runs initialValue render only on first time. This is why its is not updating your value:

<Formik
        onSubmit={async (values) => {
          console.log(JSON.stringify(values, null, 2));
        }}
        initialValues={
          Atype ? getInitialValues(data, "A") : getInitialValues(data, "B")
        }
        enableReinitialize
        ...rest all things here

Here is the demo: https://codesandbox.io/s/patient-dust-3k9xp?file=/index.js

Dynamic Formik Form Data population throwing controlled input error

1 Answers