'formik initial checkbox value not disabling submit button

In my form, I have a checkbox for captcha that needs toggled for the form to be valid, however on load, the form still shows as valid. I can check the box to enable the form, and then uncheck it again, and THEN the form shows as properly disabled.

I am using the HOC withFormik implementation. I have tried using setTouched & setFieldTouched on the checkbox, and even setting this.props.touched.captcha = true. I have also tried passing isInitialValid: false to withFormik.

Another thing I tried is passing mapPropsToTouched, but that method doesn't get called.

I am using formik v 1.5.8

How can I make the form initially disabled until I engage the checkbox?

export class LoginForm extends React.Component {
  render() {
    const {
      initialValues,
      initialTouched,
      validationSchema,
      onSubmit,
      children
    } = this.props;

    return (
      <div>
        <Formik
          initialValues={initialValues}
          initialTouched={initialTouched}
          validationSchema={validationSchema}
          onSubmit={onSubmit}
          render={(formikProps) => {
            return (
              <Form>
                {React.Children.map(children, (child, index) => {
                  return (
                    <div className='Form__row'>
                      {React.cloneElement(child, { index })}
                    </div>
                  );
                })}
              </Form>
            );
          }}
        />
      </div>
    );
  }
}

const mapDispatchToProps = {};
export function mapStateToProps(state) {
  return {};
}

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  withFormik({
    // isInitialValid: false,
    // mapPropsToTouched: (props) => {
    //   console.log('🚀 ~ file: LoginForm.jsx ~ line 257 ~ props', props);
    // },
    mapPropsToValues: (props) => {
      return {
        username: props.previousUsername ? props.previousUsername : '',
        password: '',
        rememberMe: true,
        captcha: false
      };
    }
  })
)(LoginForm);


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source