score:19

Accepted answer

I found one solution, maybe it will help someone. You need to create dynamic initialValues for formik as:

let passwordId = 'password-'+ idx ;
let firstNameId = 'firstName-'+ idx;
let lastNameId = 'lastName-'+ idx;
let zipCodeId = 'zipCode-'+ idx;

return (
  <Formik 
      key={idx}
      initialValues={{
          email: props.wrapperForm[idx].email || '',
          [passwordId]: props.wrapperForm[idx].password || '',
          [firstNameId]: props.wrapperForm[idx].firstName || '',
          [lastNameId]: props.wrapperForm[idx].lastName || '',
          [zipCodeId]: props.wrapperForm[idx].zipCode ||  ''
      }}
  >
)

score:0

I had a field on my form but no corresponding initial value for it. Once I added the field to initial values (I used a static value, didn't have to be a prop) this error message disappeared.

I notice ppb's answer changes the field names in initialValues from the question, perhaps that made them match?

I presume the component is controlled when an initial value is specified and uncontrolled otherwise.

score:2

Reading through all the above comments was really helpful especially in understanding the basic difference between uncontrolled and controlled component in form element within react. However,I got the same error after adding InitialValues as a property to Formik. This opened my mind to the fact that the error occured whenever react view a form input as uncontrolled (controlled within the DOM) combined with state changing function within react component. In fact,I was getting the error because the variable names initialized in my react useState hook are different from the name attribute on my form which I was using as the key to my form inputs. If you get the same error after adding InitialValues property on Formik,you should make sure your state variables are the same with the name attributes on each form input.


Related Query

More Query from same tag