title: Call Context function in helper function - React
body: <p>Most of my project is built with React class components so I am looking for a solution that won't require me to refactor my class components to functional components. The problem I am having is that I have a file with some helper functions that enable calling an API. In that helper file, I also want to handle errors. One of my errors could result in logging the user out. In my <code>App.js</code> component, I have the following state and functions for logging a user out:</p>
  <pre><code>export const AppContext = React.createContext(&quot;app&quot;);
  class App extends Component {
    constructor() {
      super();
      this.state = {
        loggedInStatus: &quot;NOT_INITIALIZED&quot;,
        user: {},
      };
    }
  
   handleLogout = () =&gt; {
      request.delete(&quot;/logout&quot;).then(response =&gt; {
        this.setState({
          loggedInStatus: &quot;NOT_LOGGED_IN&quot;,
          user: {},
        });
       }).catch(error =&gt; {
         console.log(&quot;error&quot;, error);
       });
    };
  
    render() {
      return(
          &lt;AppContext.Provider
            value={{
                state: this.state,
                handleLogout: this.handleLogout
            }}
          &gt;
            &lt;BrowserRouter&gt;
               {code that renders certain pages}
            &lt;/BrowserRouter&gt;
          &lt;/AppContext.Provider&gt;
      )
    }
  }
  </code></pre>
  <p>I've also created this HOC:</p>
  <pre><code>import React from 'react';
  import {AppContext} from '../App.js'
  
  export function withAppContext(Component) {
      return function WrapperComponent(props) {
          return (
              &lt;AppContext.Consumer&gt;
                  {state =&gt; &lt;Component {...props} context={state} /&gt;}
              &lt;/AppContext.Consumer&gt;
          );
      };
  }
  </code></pre>
  <p>I can import and use this context in any of my class components and call the <code>handleLogout</code> function that is provided via the context. However, I have this helper file and I want to access the <code>handleLogout</code> function in the helper file rather than some child component. Here is my helper file:</p>
  <pre><code>import axios from 'axios';
  
  const request = (function(){
    function url(){
      return window.$url;
    }
  
    return {
      get: function(uri, params={}){
        return axios.get(url() + uri,  {withCredentials: true, params: params})
      },
      post: function(uri, data){
        return axios.post(url() + uri, data, {withCredentials: true})
      },
      patch: function(uri, data){
        return axios.patch(url() + uri, data, {withCredentials: true})
      },
      delete: function(uri){
        return axios.delete(url() + uri, {withCredentials: true})
      },
      handleError: function(error){
        //I want to call the handleLogout function here
      }
  
    }
  })();
  
  export default request;
  </code></pre>
  <p>I currently call these other helper functions from within a class component like so:</p>
  <pre><code>import request from &quot;./RequestHelper&quot;;
  
  
  class CustomerForm extends Component{
  
    constructor(props){
      super(props);
      this.state = {
        isSubmitting: false
      }
    }
      
    handleSubmit = () =&gt; {
         request.get(&quot;/someurl&quot;).catch((err) =&gt; {
             //I call request.handleError(err) here
             //which will log the user out depending on the error. 
         });
    }
  }
  </code></pre>