Create react HOC with props children - reactjs

Question

I understand the react higher order component example from the official docs but I want to use it slightly differently if possible, with props.children - ie
<PageHoc> // Higher order component
<Route exact path="/" component={Invite} /> // I want to auto inject props here
</PageHoc>
In my page HOC I can auto render out the child component but how can I attach some new props here?
import React from 'react';
class PageHoc extends React.Component {
constructor(props) {
super(props);
}
render() {
return this.props.children
}
}
export default PageHoc;

Answer 1

Your PageHoc component technically is just a parent component, not a HOC as it isn't wrapping and returning a new component. But you can still inject props into children component via react's Children helper and cloneElement.
import React, { Children, Component, createElement } from 'react';
class PageParent extends Component {
constructor(props) {
super(props);
}
render() {
return Children.map(
this.props.children,
child => cloneElement(child, { injectedProp: injectedPropValue })
);
}
}
export default PageParent;
As HOC
const withInjectedProps = WrappedComponent => {
const injectedProps = {
prop1: value1,
prop2: value2,
<...etc...>
};
return <WrappedComponent {...this.props} {...injectedProps} />
}
export default withInjectedProps;
const InjectedRoute = withInjectedProps(Route);
<InjectedRoute exact path="/" component={Invite} /> // has props injected
<InjectedRoute exact path="/a" component={OtherComponent} /> // has props injected too!
Kind of depends how you need to inject the props, if you have have just a single component, many, etc..
I forgot to mention that react HOCs by convention are named starting with "with", but this isn't the rule, i.e. react-redux's connect.
react HOC docs

Answer 2

One way is to clone the children and override the props like this,
import React from 'react';
class PageHoc extends React.Component {
constructor(props) {
super(props);
}
doSomething = () => {
//your logic
}
render() {
const childrenWithProps = React.Children.map(this.props.children, child =>
React.cloneElement(child, { doSomething: this.doSomething })
);
return <div>{childrenWithProps}</div>
}
}
export default PageHoc;