title: Invalid hook call. Hooks can only be called inside of the body of a function component when other functions work
body: <p>I have storeMethods that im using as replacement of a redux container. The issue im having is that its not executing this function, all the other functions work like editComment, likePost, etc.</p>
  
  <pre><code>storeMethods().createPost(postData);
  </code></pre>
  
  <blockquote>
    <p>Error: Invalid hook call. Hooks can only be called inside of the
    body of a function component. This could happen for one of the
    following reasons:</p>
  </blockquote>
  
  <p><strong>storeHooks.tsx</strong></p>
  
  <pre><code>import usePostsHook from "./postsHook";
  import useNotificationHook from "./notificationHook";
  import { useDispatch, useSelector } from "react-redux";
  import { likePostInit, dislikePostInit, deletePostInit, createPostInit, addTitle, addContent, deleteCommentInit, editCommentInit, postCommentInit } from "../../actions/postActions";
  import { getIsNotified, getUser, getBodyError, getTitleError, postContent, title } from "../../selectors/selectors";
  function useStoreMethods() {
      const dispatch = useDispatch();
      const [posts] = usePostsHook();
      const [notifications] = useNotificationHook();
      const isNotified = useSelector(getIsNotified());
      const user = useSelector(getUser());
      const likePost = (id: number) =&gt; dispatch(likePostInit(id));
      const dislikePost = (id: number) =&gt; dispatch(dislikePostInit(id));
      const deletePost = (id: number, userId: number) =&gt; dispatch(deletePostInit(id, userId));
      const deleteComment = (id: number, postId: number, userId: number) =&gt; dispatch(deleteCommentInit(id, postId, userId));
      const postComment = (commentData: object) =&gt; dispatch(postCommentInit(commentData));
      const editComment = (commentData) =&gt; dispatch(editCommentInit(commentData));
      const createPost = (postData: object) =&gt; dispatch(createPostInit(postData));
      const ourTitle = useSelector(title());
      const titleError = useSelector(getTitleError());
      const ourBodyError = useSelector(getBodyError());
      const ourPostContent = useSelector(postContent());
  
      return {
          posts,
          notifications,
          user,
          isNotified,
          likePost,
          dislikePost,
          deletePost,
          deleteComment,
          postComment,
          editComment,
          createPost,
          ourTitle,
          titleError,
          ourBodyError,
          ourPostContent,
      };
  }
  
  export default useStoreMethods;
  </code></pre>
  
  <p>I'm using it like this</p>
  
  <p><strong>Dashboard.tsx</strong></p>
  
  <pre><code>import React, { Fragment } from "react";
  import PostForm from "../forms/createPost/createPost";
  import GridHoc from "../hoc/grid";
  import OurTabs from "../tabs/OurTabs";
  import { InputHook } from "../common/handleHook";
  import usePostsHook from "./../common/postsHook";
  import Grid from "@material-ui/core/Grid";
  import { useDispatch, useSelector } from "react-redux";
  import { createPostInit, addTitle, addContent } from "../../actions/postActions";
  import { getBodyError, getTitleError, postContent, title } from "../../selectors/selectors";
  import storeMethods from "./../common/storeHooks";
  function Dashboard(props: any) {
      const dispatch = useDispatch();
      const inputData = {
          addTitle: (data: string) =&gt; dispatch(addTitle(data)),
          addContent: (data: string) =&gt; dispatch(addContent(data)),
      };
      const { handleInputChange } = InputHook(inputData);
      const ourTitle = storeMethods().ourTitle;
      const titleError = storeMethods().titleError;
      const ourBodyError = storeMethods().ourBodyError;
      const ourPostContent = storeMethods().ourPostContent;
      const onSubmit = (e: any) =&gt; {
          e.preventDefault();
          const postData = { ourTitle, ourPostContent };
          console.log(postData);
          storeMethods().createPost(postData);
      };
      const isEnabled = titleError === true &amp;&amp; ourBodyError === true ? false : true;
      console.log("fffgg", props);
      return (
          &lt;Fragment&gt;
              &lt;Grid justify="center" container={true}&gt;
                  &lt;Grid item={true} lg={9} xs={11}&gt;
                      &lt;PostForm
                          title={ourTitle}
                          postContent={ourPostContent}
                          handleTitleChange={handleInputChange}
                          handleContentChange={handleInputChange}
                          onSubmit={onSubmit}
                          disButton={isEnabled}
                          titleError={titleError}
                          bodyError={ourBodyError}
                      /&gt;
                  &lt;/Grid&gt;
              &lt;/Grid&gt;
  
              &lt;br /&gt;
  
              &lt;OurTabs /&gt;
          &lt;/Fragment&gt;
      );
  }
  
  export default GridHoc(Dashboard);
  // will be useful for unit testing.
  export { Dashboard as DashboardComponent };
  </code></pre>