title: Pass props to global context provider from function
body: <p>I looking for help understanding how to pass <code>props</code> to a context provider from within a <code>function</code> of a <code>child</code> component.</p>
  
  <p>I have a global provider which I want to hold <code>data</code> from a form, more specifically the <code>error</code> data if the <code>onSubmit</code> fails.</p>
  
  <p>Using <code>createContext</code> I have a global provider</p>
  
  <pre><code>import React, { createContext } from 'react';
  
  interface InterfaceProps {
    children?: any;
  }
  
  interface InterfaceState {
    error: any;
    toggleAuthError: any;
  }
  
  const GlobalContext = createContext({
    error: null,
    toggleAuthError: () =&gt; {}
  });
  
  export class GlobalProvider extends React.Component&lt;InterfaceProps, InterfaceState&gt; {
    public toggleAuthError = ({ authError }: any) =&gt; {
      this.setState({ error: authError });
    };
  
    public state = {
      error: null,
      toggleAuthError: this.toggleAuthError
    };
  
    public render() {
      const { children } = this.props;
      return &lt;GlobalContext.Provider value={this.state as any}&gt;{children}&lt;/GlobalContext.Provider&gt;;
    }
  }
  
  export const GlobalConsumer = GlobalContext.Consumer;
  </code></pre>
  
  <p>Then within my form <code>child</code> component I have a function called <code>onSubmit</code>.</p>
  
  <pre><code>public handleFormSubmit = async (data: { email: string; password: string }) =&gt; {
      const { form } = this.props;
      const { email, password } = data;
  
      await form
        ...
        .catch((error: any) =&gt; {
          toggleAuthError(error); // Want this to trigger the function and pass error to the context provider
          this.setState({
            loading: false
          });
        });
    };
  </code></pre>
  
  <p>How can I pass <code>error</code> to <code>this.toggleAuthError</code> in the context provider?</p>