Using a HOC (higher order component) with React-Redux connect

Question

I'm trying to get more comfortable with using higher order components so I'm working on refactoring an application. I have four different components that all reuse the same fetchData request, as well as error/loading conditionals. My plan is to take this reusable data and put it into a HOC. I've tried many different examples from StackOverflow, Reddit, Github, etc and none of them are working in my specific case.

Here's my HOC:

const WithDataRendering = WrappedComponent => props => {
class WithDataRenderingComponent extends Component {
    componentDidMount() {
    this.props.fetchData(url)
    }
    render() {
    if (this.props.hasErrored) {
        return (
        <p>
            Sorry! There was an error loading the items:{" "}
            {this.props.hasErrored.message}
        </p>
        )
    }

    if (this.props.isLoading) {
        return (
        <div>
            <Skeleton count={10} />
        </div>
        )
    }

    return <WrappedComponent {...this.props} />
    }
}
const mapStateToProps = state => {
    return {
    data: state.data,
    hasErrored: state.dataHasErrored,
    isLoading: state.dataIsLoading
    }
}

const mapDispatchToProps = dispatch => {
    return {
    fetchData: url => dispatch(fetchData(url))
    }
}
return connect(mapStateToProps, mapDispatchToProps)(
    WithDataRenderingComponent
)
}

export default WithDataRendering

And here's a component that I'm trying to wrap with the HOC:

export class AllData extends Component<Props> {
    render() {
        return (
        ...
        )
    }
}

const mapStateToProps = state => {
    return {
        data: state.data,
        hasErrored: state.dataHasErrored,
        isLoading: state.dataIsLoading
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchData: url => dispatch(fetchData(url))
    }
}

export default compose(
    connect(mapStateToProps, mapDispatchToProps),
    WithDataRendering(AllData)
)

I get three errors in the console:

Warning: Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

invariant.js:42 Uncaught Error: Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

ReactDOMComponentTree.js:111 Uncaught TypeError: Cannot read property '__reactInternalInstance$24sdkzrlvvz' of null

A couple other techniques I tried are in this SO post and this gist . I've tried using compose and not using it, doesn't matter. I'm really at a loss here. Any ideas why this HOC isn't rendering properly?

Also, I'm not opposed to using render props as a solution if that fits better. I need to get more practice with both methods.

Answer 1

I was able to fix this by dropping the props => argument as Oblosys suggested. I also reconfigured the export statement in AllData to be:

export default connect(mapStateToProps, mapDispatchToProps)(WithDataRendering(AllData))

since I didn't really need to use compose there.