title: React HOC class returns nothing
body: <p>I am facing a problem I can't figure out. For a project we use React to generate a layout from JSON input using the following code (simplified):</p>
  
  <pre><code>function generateComponents(children, params) {
    let comps = [];
    if (!children || children &amp;&amp; children.length === 0) {
      return [];
    }
  
    forEach(children, (comp) =&gt; {
        let compName = comp.component;
        let createdComp;
        switch (compName) {
          case 'test1':
            createdComp = TestOne(Object.assign({}, comp, params));
            break;
          case 'test2':
            createdComp = TestTwo(Object.assign({}, comp, params));
            break;
        }
        comps.push(createdComp)
      }
    }
    return comps.length === 1 ? comps[0] : comps;
  }
  </code></pre>
  
  <p>This works well and the layout is generated correctly. We wanted to take this a step further and wrap the <code>createdComp</code> in a <code>Higher Order Component</code>. We implemented that in the following way:</p>
  
  <pre><code>function generateComponents(children, params) {
    // see above for implementation
  
    let component;
  
    if (condition)
      component = testingHOC(createdComp);
    else
      component = createdComp
  
    comps.push(component);
  }
  
  // TestingHOC.js
  export function testingHoc(WrappedComponent) {
    console.log('wrapped')
    return class TestingHoc extends Component {
      render() {
        console.log('props TestingHOC', this.props);
        return ( &lt;WrappedComponent { ...this.props} /&gt;);
      }
    }
  };
  </code></pre>
  
  <p>This broke our component generation. The code returns nothing. The only thing that gets logged is the <code>console.log('wrapped')</code>, the render function of the class is never called. What are we missing here?</p>
  
  <p><strong><em>EDIT:</em></strong>
  Render method of the render class:</p>
  
  <pre><code>render() {
      const children = this.state.children;
      const {params} = this.props;
      const arrChildren = isArray(children) ? children : [children];
      let comps = generateComponents(arrChildren, params || {});
      if (isArray(comps)) {
          return (
              &lt;ViewComponent&gt;
                  {comps}
              &lt;/ViewComponent&gt;
          );
      } else {
          return comps;
      }
  }
  </code></pre>
  
  <p><strong><em>EDIT 2:</em></strong></p>
  
  <p>Console.log of <code>{comps}</code> with the testingHoc
  <a href="https://i.stack.imgur.com/UjmJA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UjmJA.png" alt="Console.log of &lt;code&gt;{comps}&lt;/code&gt; with the testingHoc"></a>
  Console.log of <code>{comps}</code> <strong>without</strong> the testingHoc
  <a href="https://i.stack.imgur.com/SxcMv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SxcMv.png" alt="Desired state of children"></a></p>
  
  <p><strong><em>Edit 3</em></strong></p>
  
  <p>Added the code for ViewComponent:</p>
  
  <pre><code>import React from 'react';
  
  const ViewComponent = (props) =&gt; (
      &lt;div {...props}/&gt;
  );
  
  export default ViewComponent;
  </code></pre>