Heavily nested React components - Outer first

HTML

<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<div id="root">

</div>

CSS

.comp {
      border: 5px solid green;
      padding: 5px;
      margin: 5px;
      display: inline-block;
    }
    .compOne { border-color: red;}
    .compTwo { border-color: green;}
    .compThree { border-color: blue;}
    .compFour { border-color: black;}
    .compFive { border-color: teal;}

Babel + JSX

const CompOne = (props) => (
        <div className="comp compOne"><p>One:</p>{ props.content || props.children } </div>);
    const CompTwo = (props) => (
    	<div className="comp compTwo"><p>Two:</p> { props.content || props.children }</div>);
    const CompThree = (props) => (
    	<div className="comp compThree"><p>Three:</p> { props.content || props.children }</div>);
    const CompFour = (props) => (
    	<div className="comp compFour"><p>Four:</p> { props.content || props.children }</div>);
    const CompFive = (props) => (
    	<div className="comp compFive"><p>Five:</p> { props.content || props.children }</div>);

const renderMap1 = [
  { component: CompOne, props: {} },
  { component: CompTwo, props: {} },
  { component: CompThree, props: {} },
  { component: CompFour, props: {} },
  { component: CompFive, props: { content: "hi there" } }
];

const renderMap2 = [].concat(renderMap1.slice(1,4).reverse(), renderMap1.slice(4));
const renderMap3 = renderMap2.slice(1);

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  renderComponents(renderMap) {
    const Component = renderMap
    //.reverse()
    .reduce( (ComponentSoFar, {component, props}) => {
      let Inner = component;
      // each new component we return must hold a "channel" open into the
      // inner-most component, leaving it open to receive the children
      // that will only be known later.
      return ({children}) =>
      	(<ComponentSoFar ><Inner {...props}>{children}</Inner></ComponentSoFar>);
    },
   	 props => <div>{props.children}</div> 
    ); // initial value: start off with a div waiting to receive its children
    
    debugger;
    return ( <Component /> );
  }
  
  render() {
    return ( <div> 
        { this.renderComponents(renderMap1) } 
        { this.renderComponents(renderMap2) } 
        { this.renderComponents(renderMap3) } 
      </div> );
  }
};

ReactDOM.render(<App />, document.getElementById('root'));