How to pass props with HOC invocation

Question

So here's my issue. I'm using HOC inside my React Router. So it looks like that:

    <BrowserRouter>
      <div className="main__container">
        <Route exact path="/" component={authHOC(MainView)} />
        <Route path="/article" component={authHOC(Article)} />
        <Route path="/apps" component={authHOC(AppList)} />
      </div>
    </BrowserRouter>

Now, I'd like to pass some props to my wrapped components. I'd like to have something like this:

component={authHOC(Article({ header: true })}

so to pass props to my component. Above won't work. Is there a way to pass it?

My HOC component looks like this:

export default function(ProtectedComponent, addProps) {
  return class LoginPage extends Component {

    checkUserAuth = async() => {
      const token = await api.getAuthToken();
      this.setState({ isUserLoggedIn: !!token, loading: false });
    };

    redirectToAuth = () => <Redirect to="/login" />;

    render() {
      const { isUserLoggedIn, loading } = this.state;

      if(!loading) {
        return isUserLoggedIn ? (
          <ProtectedComponent {...this.props} {...addProps} />
        ) : this.redirectToAuth();
      }

      return null;
    }
  };
}

https://www.youtube.com/watch?v=A9_9gQIkfx4&index=8&list=PL7pEw9n3GkoUZX3e9lBbmQqdCpgAWYooz — Dhaval, Oct 02 '18 at 12:42
you are not doing in right way. watch this video and will get idea how to use HOC.Don't pass HOC to router insted of doing this try to pass from component itself from component. — Dhaval, Oct 02 '18 at 12:43

score 3 · Accepted Answer · answered Oct 02 '18 at 13:02

3

Components shouldn't be called directly like Article({ header: true }), unless this is done on purpose.

A higher-order component can accept a component and additional arguments that are used in wrapped component, as shown in the guide, e.g.:

<Route exact path="/" component={authHOC(MainView, { header: true })} />

and

const authHOC = (Comp, props) => <Comp {...props}/>;

In case authHOC is third-party HOC that cannot be modified, it should be provided with enhanced component:

<Route exact path="/" component={
  authHOC(props => <MainView {...props} header={true} />)
} />

answered Oct 02 '18 at 13:02

Estus Flask

206,104
70
425
565

Hi, thank you for your answer. For some reason I cannot see my addProps in wrapped component - {...addProps}. Why is that? It is just another function... – Murakami Oct 02 '18 at 13:33
I didn't see updated code in the question previously, but it looks ok to me. addProps should be added to wrapped component. Can you replicate the problem with a demo? – Estus Flask Oct 02 '18 at 13:43

How to pass props with HOC invocation

1 Answers1