Checkbox with Initial Value in Formik Not Toggling, Need to Handle Checked/defaultChecked

user_1005607 0
Viewed 3914

I have a checkbox in a Formik whose initial value is determined after a DB fetch, which populates values. But if I do the following, then although the initial value is correct, I can't toggle the checkbox, it always remains checked.

<Form.Control type="checkbox" 
              id="checkCertAgreement" 
              name="certAgreement"
              checked={values.certifyAndReview === 'Y'}
              value="Y"
              onChange={handleChange} 
              onBlur={handleBlur}   
/>

That means I can't use checked but have to use defaultChecked. But the problem is, my values come after an Ajax fetch in an initial useEffect fetch. defaultChecked only applies on the very first render. When the first render happens, obviously values aren't loaded yet and values.certifyAndReview === 'Y' is false. So now my initial value for the checkboxes doesn't work anymore, although I can toggle now.

<Form.Control type="checkbox" 
              id="checkCertAgreement" 
              name="certAgreement"
              defaultChecked={values.certifyAndReview === 'Y'}
              value="Y"
              onChange={handleChange} 
              onBlur={handleBlur}   
/>

Any solutions to this? Note: This problem does not occur on radiobuttons, for some reason. On radiobuttons, when I specify checked={values.field === 'Y'}, it both sets the initial post-fetch value and allows me to toggle.

react-bootstrap formik reactjs
2 Answers

I had to add an explicit checked as follows,

checked={values.field == 'Y' ? true : false}

Now it picks up initialized checked states.

user_10056070

My suggestion is to use Form.Check instead.

<Form.Check type="checkbox" 
            id="checkCertAgreement" 
            name="certAgreement"
            checked={values.certifyAndReview === 'Y'}
            onChange={handleChange} 
            onBlur={handleBlur} 
​/>
user_18610160
Related