Recompose HOC not displaying child component

Question

So I'm hoping I'm missing something simple here.

I'm trying to integrate recompose so that I can move a few functional pieces of code out of my render (dumb) component and into my HOC.

The following HOC doesn't render it's child (MainReduxForm) component. What am I missing?

import { connect } from 'react-redux';
import MainReduxForm from './MainForm';
import { formValueSelector } from 'redux-form';
import { compose, lifecycle } from 'recompose';  

export default () => MainFormContainer => {

const mapState = (state, ownProps) => {
  return {
    test: test
  };
};


const mapDispatch = (dispatch, ownProps) => {
    return {
      onOrderChange: order => dispatch({type: 'FETCH_ORDER', order: order}),
    }
}



 return compose(
  connect(mapState, mapDispatch)
  (MainReduxForm));

ERROR =

Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Answer 1

return compose(
  connect(mapState, mapDispatch)
  (MainReduxForm));

connect() call returns a function, which should be invoked with components. Then compose should call what is returned from it .