title: How to render React providers recursively?
body: <p>I have <code>n</code> number of provider components, which are providing context for my MobX stores:</p>
  
  <pre><code>function App({ children }) {
    const owner = createStore(() =&gt; OwnerStore);
    const OwnerProvider = useProvider(OwnerStoreID);
  
    const cat = createStore(() =&gt; CatStore);
    const CatProvider = useProvider(CatStoreID);
  
    return (
      &lt;OwnerProvider value={owner}&gt;
        &lt;CatProvider value={cat}&gt;
          {children}
        &lt;/CatProvider&gt;
      &lt;/OwnerProvider&gt;
    );
  }
  </code></pre>
  
  <p>However, the number of distinct stores in my application is actually in the dozens, and I don't want to maintain a Christmas tree of nested providers.</p>
  
  <p>I have attempted to write something like this:</p>
  
  <pre><code>const storesConfig = [
    {
      store: OwnerStoreID,
      id: OwnerStoreID,
    },
  ]
  
  export const StoresProvider = ({ children }) =&gt; {
    const createdStores = storesConfig.map((storeConfig) =&gt;
      createStore(() =&gt; storeConfig.store)
    )
    const createdProviders = storesConfig.map((storeConfig) =&gt;
      useProvider(storeConfig.id)
    )
  
    return createdProviders.reduce((Acc, Cur, index) =&gt; {
      const child =
        index &lt; createdProviders.length ? (
          &lt;Cur value={createdStores[index]} /&gt;
        ) : (
          &lt;Cur value={createdStores[index]}&gt;{children}&lt;/Cur&gt;
        )
      if (Acc) {
        return &lt;Acc value={createdStores[index - 1]}&gt;{child}&lt;/Acc&gt;
      } else {
        return Cur
      }
    }, null)
  }
  
  </code></pre>
  
  <p>However, I have run into many indecipherable TypeScript errors. What am I doing wrong? Surely there is a way of recursively assembling a React component tree? </p>