React Recompose : Method created in WithStateProps is not accessible











up vote
0
down vote

favorite












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?










share|improve this question
























  • Add your that setReady where you're using withFormikHoc
    – varit05
    Nov 21 at 17:07










  • Already added by adding : WrappedProps
    – Emad Dehnavi
    Nov 21 at 17:10















up vote
0
down vote

favorite












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?










share|improve this question
























  • Add your that setReady where you're using withFormikHoc
    – varit05
    Nov 21 at 17:07










  • Already added by adding : WrappedProps
    – Emad Dehnavi
    Nov 21 at 17:10













up vote
0
down vote

favorite









up vote
0
down vote

favorite











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?










share|improve this question















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?







javascript reactjs typescript recompose






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 21 at 18:21









Ishaan

6551316




6551316










asked Nov 21 at 16:54









Emad Dehnavi

1,519516




1,519516












  • Add your that setReady where you're using withFormikHoc
    – varit05
    Nov 21 at 17:07










  • Already added by adding : WrappedProps
    – Emad Dehnavi
    Nov 21 at 17:10


















  • Add your that setReady where you're using withFormikHoc
    – varit05
    Nov 21 at 17:07










  • Already added by adding : WrappedProps
    – Emad Dehnavi
    Nov 21 at 17:10
















Add your that setReady where you're using withFormikHoc
– varit05
Nov 21 at 17:07




Add your that setReady where you're using withFormikHoc
– varit05
Nov 21 at 17:07












Already added by adding : WrappedProps
– Emad Dehnavi
Nov 21 at 17:10




Already added by adding : WrappedProps
– Emad Dehnavi
Nov 21 at 17:10












2 Answers
2






active

oldest

votes

















up vote
0
down vote













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.






share|improve this answer




























    up vote
    0
    down vote



    accepted










    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.






    share|improve this answer





















      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53417030%2freact-recompose-method-created-in-withstateprops-is-not-accessible%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes








      up vote
      0
      down vote













      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.






      share|improve this answer

























        up vote
        0
        down vote













        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.






        share|improve this answer























          up vote
          0
          down vote










          up vote
          0
          down vote









          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.






          share|improve this answer












          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.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 21 at 20:43









          Sergio Moura

          4,03311631




          4,03311631
























              up vote
              0
              down vote



              accepted










              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.






              share|improve this answer

























                up vote
                0
                down vote



                accepted










                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.






                share|improve this answer























                  up vote
                  0
                  down vote



                  accepted







                  up vote
                  0
                  down vote



                  accepted






                  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.






                  share|improve this answer












                  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.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 22 at 9:40









                  Emad Dehnavi

                  1,519516




                  1,519516






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.





                      Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                      Please pay close attention to the following guidance:


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53417030%2freact-recompose-method-created-in-withstateprops-is-not-accessible%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

                      Calculate evaluation metrics using cross_val_predict sklearn

                      Insert data from modal to MySQL (multiple modal on website)