state.js

import React from 'react';
import { Provider1, Provider2, Provider3 } from './';

function ProviderComposer({ contexts, children }) {
  return contexts.reduceRight(
    // kids = accumulator, parent = currentValue
    (kids, parent) =>
      React.cloneElement(parent, {
        children: kids
      }),
    // initialValue for kids
    children
  );
}

function StateProvider({ children }) {
  return (
    <ProviderComposer
      contexts={[<Provider1 />, <Provider2 />, <Provider3 />]}
    >
      {children}
    </ProviderComposer>
  );
}

export { StateProvider };