Qfyilyi

I Using React, Recompose and Formik and have a problem, Child component form not working after submit my formik form and render child component using renderComponent

This is my handleSubmit for Formik :

handleSubmit: async (values, { props, setSubmitting, resetForm }) => {

    try {

      props.updateOnboardingState({

        isValid : values.state,

      }, { stayOnStep: true });

      setSubmitting(false);

      resetForm({})

      props.setEligible(false);

    } catch (err) {

      props.notify.error(err.message);

      setSubmitting(false);

    }

  },

and I render my other component like this :

export const enhance = compose<WrappedProps, {}>(

  withFormikHoc,

  withMapProps,

  branch<WithStateProps>(

    props => !props.isEligible,

    renderComponent(ValidationComponent),

    identity

  )

  );



export const MyForm = enhance(BaseComponent);

So my ValidationComponent will render fine, but the problem is, in this component I also have another Formik, and the form inside this not worked at all, I mean the handleSubmit for this component not triggered.

This is the handleSubmit for the ValidationComponent which unable to trigger :

handleSubmit: (values, { setSubmitting }) => {

    console.log("Is this triggred?")

  },

When I submit the child form, nothing will happened, no logs, no errors, nothing, totally confused! any help appreciate it