React Compose Components.

composeReactElements.ts

import React from 'react';

const genContainer =
  (name: string): React.FC =>
  ({ children }) =>
    (
      <div>
        <h1>I'm {name}</h1>
        <div style={{ paddingLeft: '10px' }}>{children}</div>
      </div>
    );

const Compose: React.FC<{
  components: React.ComponentType[];
  children: React.ReactElement;
}> = ({ children, components }) =>
  components.reduceRight(
    (Child, Parent) => (
      <>
        <Parent>{Child}</Parent>
      </>
    ),
    children,
  );

export default () => {
  return (
    <Compose
      components={['parent1', 'parent2', 'parent3', 'parent4'].map((name) => genContainer(name))}
    >
      <h1>Bingo!</h1>
    </Compose>
  );
};