CODEWITHSUNDEEP
javascriptreactjsmodule
Dexygen
Dexygen

Reputation: 12561

"Functions are not valid as a React child" when trying to use HOC from a module object

See the code below, I'm trying to use "HOC" from a module object returned from an IIFE, to keep things simple to begin with I'm keeping most code in the HTML file. However I am getting the "warning" (or really "error" since my page won't render): "Functions are not valid as a React child."

I've tried a couple of things that don't work, first adding () to the end of withFoobar.HOC(Salutation)() not unlike suggested here (https://stackoverflow.com/a/51220156/34806), but that results in "Uncaught TypeError: Cannot call a class as a function" which makes perfect sense. I've also tried prepending return but that just results in a syntax error.

Without the module object, I'm basing my code primarily on this gist: https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775 But I want to be able to accept a parameter in addition to the component and then store them for future reference. Is what I'm trying possible? Thanks.

const withFooBar = (() => {
    let params;

    return {
        HOC: (ComponentWithFooBar, param) => class extends React.Component {
            constructor(props) {
              super(props);
              this.state = { data: null };
              params = params || [];
              params.push(param);
            }
            render() {
                return <ComponentWithFooBar {...this.props} data={this.state.data} />;
            }
        },
        getParams: {
            return params;
        }
    }
})();

ReactDOM.render(
    //<Salutation />,
    withFooBar.HOC(Salutation),
    document.getElementById('app-content')
);

Upvotes: 1

Views: 197

Answers (1)

Estus Flask
Estus Flask

Reputation: 223318

Higher-order component returns a component. render expects React element and not a component as first argument. It should be:

const SalutationWithFooBar = withFooBar.HOC(Salutation);

ReactDOM.render(
    <SalutationWithFooBar />,
    document.getElementById('app-content')
);

Upvotes: 1

Related Questions