CODEWITHSUNDEEP
reactjsformikyup
SilentImp
SilentImp

Reputation: 2005

«A component is changing an uncontrolled input of type checkbox to be controlled.» warning for checkboxes with Formik

I try to use formik with autogenerated forms. But when there are checkbox's I get an warning:

Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa).

when touching them. For other fields in may be solved with an initial value for formilk component. But checkboxes shouldn't have initial value. How it may be fixed?

Upvotes: 1

Views: 2810

Answers (2)

Rico Rodriquez Collins
Rico Rodriquez Collins

Reputation: 311

A few of things:

  1. As previously mentioned, make sure that your initialValue object contains a key for the array that creates the checkboxes (or radio buttons).
  2. Make sure that the key is referenced as name = prop for the Field
  3. For each checkbox/radio entry, since this input type can only have values "True" or "False", make sure the prop checked is set to a boolean--NOT a "truthy" value (like a string, number, or object). So instead of doing this: checked={someArray.find(x....)} do this:{!!someArray.find(x....)}

Upvotes: 1

SilentImp
SilentImp

Reputation: 2005

Well, it looks like you should have initialValue with a name of every field and set false/true for every input:checkbox.

Upvotes: 5

Related Questions