React HOC class returns nothing

Question

I ran into a problem that I cannot understand. For the project, we use React to create a layout from JSON input using the following (simplified) code:

function generateComponents(children, params) { let comps = []; if (!children || children && children.length === 0) { return []; } forEach(children, (comp) => { 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; } 

This works well and the layout is generated correctly. We wanted to take this step further and wrap createdComp in a Higher Order Component . We implemented it as follows:

 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 ( <WrappedComponent { ...this.props} />); } } }; 

This has broken our generation of components. The code does not return anything. The only thing that registers is console.log('wrapped') , the class's rendering function is never called. What are we missing here?

EDIT: Rendering method of a rendering class:

 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 ( <ViewComponent> {comps} </ViewComponent> ); } else { return comps; } } 

EDIT 2:

Console.log {comps} with hoc test Console.log {comps} without testHoc

Edit 3

Added code for ViewComponent:

 import React from 'react'; const ViewComponent = (props) => ( <div {...props}/> ); export default ViewComponent; 

Answer 1

The problem you are facing is related to the inherent difference between the React element and the React component.

If you are not using HOC, you create a React element that can be seen with the first console.log image. This is the result after reconciliation .

When you use HOC, your HOC returns a component that appears as a test(props) function in your second console.log image.

To have the same functions with your advanced HOC components, you need to change the code in generateComponents to

  if (condition){ let Comp = testingHOC(createdComp); component = <Comp/>; } 

Answer 2

Try

  ... return ( <ViewComponent> {comps.map((Comp) => <Comp />)} </ViewComponent> ); ... 

or

  ... return ( <ViewComponent> {comps.map((comp) => comp())} </ViewComponent> ); ...