Reputation: 12561
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
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