Search code examples
javascriptreactjstypescriptrecompose

React Recompose : Method created in WithStateProps is not accessible


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?


Solution

  • 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.