title: Consuming a context within another context in React
body: <p>I currently have 2 contexts within my React app and I was trying to call a method from my top-level context within my 2nd context.</p>
  
  <p>Here is how the context are nested:</p>
  
  <p>App.js</p>
  
  <pre><code>function App(props) {
  
    return (
      &lt;SessionContextProvider&gt;
        &lt;APIContextProvider&gt;
           // I have some components here
        &lt;/APIContextProvider&gt;
      &lt;/SessionContextProviders&gt;
    )
  }
  </code></pre>
  
  <p>is there a way to consume the SessionContext within my APIContextProvider?</p>
  
  <pre><code>import { SessionContext } from 'contexts/session'
  
  export const APIContext = createContext();
  
  export default class APIContextProvider extends Component {
  
      static contextType = SessionContext
  
      randomMethod() {
          this.context.logoutUser()
      }
  
      render() {
          return (
              &lt;APIContext.Provider value={{randomMethod: this.randomMethod}}&gt;
                  {this.props.children}
              &lt;/APIContext.Provider&gt;
          )
      }
  }
  </code></pre>
  
  <p>The issue is that when running randomMethod within my APIContext doesn't work because this.context is undefined.</p>
  
  <p>Is this feasible or am I missing something?</p>