title: Is it possible to access child context from parent context?
body: <p>I have an issue with <code>Context</code>. I have two contexts, <code>AuthenticationProvider</code>and <code>VehiclesProvider</code>. </p>
  
  <h2>App.tsx</h2>
  
  <pre class="lang-js prettyprint-override"><code>import { AuthenticationProvider, VehiclesProvider } from '../contexts/
  
  export class App extends React.Component {
    public render() {
      return (
        &lt;ThemeProvider theme={theme}&gt;
          &lt;I18nextProvider i18n={i18nConfig}&gt;
            &lt;GlobalStyle /&gt;
            &lt;AuthenticationProvider&gt;
              &lt;VehiclesProvider&gt;
                &lt;AppRouter /&gt;
              &lt;/VehiclesProvider&gt;
            &lt;/AuthenticationProvider&gt;
          &lt;/I18nextProvider&gt;
        &lt;/ThemeProvider&gt;
      )
    }
  }
  </code></pre>
  
  <p>When we log out from the app the <code>AuthenticationProvider</code> updates its own state and resets it to initial state. But what we need to do is also, from a method in <code>AuthenticationProvder</code>, is to reset the state in <code>VehiclesProvider</code>.</p>
  
  <p>So my question is: <strong>Is it possible from a Parent Context to access/modify state in a Child Context?</strong></p>
  
  <h2>AuthenticationProvider.tsx</h2>
  
  <p>This is the method in <code>AuthenticationProvider</code> which should trigger a reset of the child context, <code>VehiclesProvider</code>.</p>
  
  <pre><code>export class AuthenticationProvider extends React.Component&lt;
    IAuthenticationProviderProps,
    IAuthenticationProviderState
  &gt; {
    public state = {
      isAuthenticated: false,
      data: undefined,
    }
  
    // THIS METHOD MUST TRIGGER `resetFetchedVehicles` in `VehiclesContext`
    /**
    * **Update context to logged in state**
    *
    * Save response from API to context. Also let the app know that the user is authenticated.
    *
    * @memberof AuthenticationProvider
    */
    public login = (data: UserClass) =&gt; {
      const sameUser = this.isSameUser(data.Id)
  
      // If it is not the same user, then reset the VehcilesContext
      // if(!sameUser) this.props.resetFetchedVehicles()
      if(sameUser) this.METHODINCHILDCONTEXT.resetFetchedVehicles() // THIS IS WHERE THE STATE IN VEHICLESPROVIDER MUST BE MODIFIED
  
      this.setState({
        isAuthenticated: true,
        data,
      })
    }
  
    public render() {
      return (
        &lt;VehiclesConsumer&gt;
          {(context) =&gt; (
            &lt;AuthenticationContext.Provider
              value={{
                isAuthenticated: this.state.isAuthenticated,
                data: this.state.data,
                login: this.login,
                logout: this.logout,
                isSameUser: this.isSameUser
              }}
            &gt;
              {this.props.children}
            &lt;/AuthenticationContext.Provider&gt;
          )}
        &lt;/VehiclesConsumer&gt;
      )
    }
  }
  </code></pre>
  
  <h2>VehiclesContext.tsx</h2>
  
  <pre class="lang-js prettyprint-override"><code>export class VehiclesProvider extends React.Component&lt;
    IVehiclesProviderProps,
    IVehiclesProviderState
  &gt; {
    public state: IVehiclesProviderState = {
      loading: false,
      fetchedVehicles: [],
      totalVehicles: 0,
    }
  
    // THIS METHOD MUST BE TRIGGERED FROM `logout` in `AuthenticationContext`
    /**
     * **Remove all the fecthed vehicles from state**
     *
     * @memberof VehiclesProvider
     */
    resetFetchedVehicles = () =&gt; {
      this.setState({
        fetchedVehicles: []
      })
    }
  
    public render() {
      return (
        &lt;VehiclesContext.Provider
          value={{
            loading: this.state.loading,
            fetchedVehicles: this.state.fetchedVehicles,
            fetchVehicles: async () =&gt; await this.fetchVehicles(),
            updateUserVehicleInfo: vehicle =&gt; this.updateVehicleInfo(vehicle),
            resetFetchedVehicles: () =&gt; null
          }}
        &gt;
          {this.props.children}
        &lt;/VehiclesContext.Provider&gt;
      )
    }
  }
  </code></pre>
  
  <h1>UPDATE</h1>
  
  <p>I have found a way to be able to do what I was asking for, with React Context. It is NOT a recommmended solution, since the code gets very ugly and hard to understand. But it works. I will still probably change to MST/Redux.</p>
  
  <p>For those who are intersted, here is a Code Sandbox: Hi! 
  Yesterday I asked a question regarding if it was possible to update a child context's state from a method in a parent context. I totally understand that it is now how React Context is supposed to be used.</p>
  
  <p>But after a lot of struggling I have found a way to do it. It is a hacky way, and it is probably not recommended. If you need to update state from different components you should use Redux or MobxStateTree.</p>
  
  <p>For those who are interested in how to be able to update a child context from a method in the partent, here is a Code Sandbox: <a href="https://codesandbox.io/s/kn16859z3" rel="nofollow noreferrer">https://codesandbox.io/s/kn16859z3</a></p>