Ytukyg

I am using Recompose to define some methods like below :

export interface WithStateProps {

  isDisabled: boolean;

  isReady: boolean;

  setDisabled(value: boolean): void;

  setReady(value: boolean): void;

}





export const withStateHoc = withState('isDisabled', 'setDisabled', false);

export const withIsEligibleStateHoc = withState(

  'isReady',

  'setReady',

  true

);



export const isReady = (value : string) => {

  return value ? true : false

};



export type WrappedProps = StepContentProps &

  FormikProps<MyAddress> &

  InjectedIntlProps & 

  AddressFormHandlers & WithStateProps;

When I want to use the setReady method I get this message: props.setReady is not a function Here is my code:

export const withFormikHoc = withFormik<

  WrappedProps & RouteComponentProps<{}> & InjectedIntlProps & WithStateProps,

  MyAddress

>({

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

     const addressAlreadyVerified = isReady(values.country);

     if(addressAlreadyVerified) {

        props.setReady(true)

     }

   }

})

When I hover on props.setReady(true) in VCode, I can see: (method) WithStateProps.setReady(value: boolean): void

But I know that props.setReady is not a function!

Does anyone have any idea what I am missing here?

You're not getting the props properly. Your deconstructor is wrong.

Here is how it should look:

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

What it means: from your component props, extract setSubmitting into its own variable and put everything else inside a props object.

What you should actually do:

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

  const addressAlreadyVerified = isReady(values.country);

  if (addressAlreadyVerified) {

    setReady(true)

  }

}

This way, you only extract the values that you need from your props, and don't end up with an object full of properties you don't really need.

EDIT

If you want, you can choose NOT to deconstruct anything and your could would end up somewhat like this:

handleSubmit: async (values, props) => {

  const addressAlreadyVerified = isReady(values.country);

  if (addressAlreadyVerified) {

    props.setReady(true)

  }

}

I just realized that you're not using setSubmitting at all. You can just remove that if you wish.

Well, I find the problem, which was my mistake, in my compose I added withFormikHoc before withStateHoc & withIsEligibleStateHoc and that was the reason for the error. After bring them first problem solved.