0

I'm not sure if I'm using a HOC correctly but I have state at the top app level which needs to be updated from a child components that exists in a HOC.

my main app router that holds the state

class AppRouter extends React.Component {
  state = {
    selected: "",
  };

  updateSelected = selected => {
    this.setState({ selected });
  };
  updateReports = reports => {
    this.setState({ reports });
  };

  render() {
    return (
      <Router history={history}>
        <div>
          <div className="holygrail">
            <Header setIsAuth={this.setIsAuth} isAuth={this.state.isAuth} />
            <Switch>
              <PublicRoute
                path="/login"
                isAuth={this.state.isAuth}
                component={() => <Login setIsAuth={this.setIsAuth} />}
                exact={true}
              />
              <PrivateRoute
                path="/"
                selected={this.state.selected}
                isAuth={this.state.isAuth}
                updateSelected={this.updateSelected}
                updateReports={this.updateReports}
                component={Dashboard}
                exact={true}
              />
              <Route component={NotFound} />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

export default AppRouter;

I have a PrivateRoute that then has a template which include a nav that should not be shown on a PublicRoute

export const PrivateRoute = ({ component: Component, isAuth, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      console.log("Private Route ", isAuth);
      return isAuth ? (
        <div className="holygrail-body">
          <Nav
            updateSelected={this.updateSelected} <-- how to pass these back up to AppRouter parent?
            updateReports={this.updateReports}
          />
          <Component {...props} />
        </div>
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      );
    }}
  />
);

export default PrivateRoute;

How do I pass the Nav props to update the main component state.

Justin
  • 954
  • 4
  • 22
  • 44
  • Possibly this is the answer you looking for https://stackoverflow.com/questions/35537229/how-to-update-parents-state-in-react – Ethan Vu Jul 12 '19 at 08:04
  • @EthanVu I know how to pass state from a normal component but not sure how to do it for a HOC am I missing something? – Justin Jul 12 '19 at 08:10
  • what you need is a callback ` – Jee Mok Jul 12 '19 at 08:51
  • @JeeMok hmm it loads the component but when I click it just says `Cannot read property 'props' of undefined` – Justin Jul 12 '19 at 09:16
  • try accessing the function eg: export const PrivateRoute = ({ component: Component, isAuth, updateSelected, ...rest }) { your code } @Justin – Joseph Jul 12 '19 at 09:50
  • @Joseph this actually almost works - issue is that the component in the `PrivateRoute` doesn't re-render. Do you think there's a better way to layout what I'm trying to achieve? – Justin Jul 12 '19 at 10:01

0 Answers0