The power of a branch

Branch.js

// Basic branch
const Branch = props => {
  if (props.condition) return props.renderLeft();
  return props.renderRight();
};

Branch.defaultProps = { 
  renderRight: () => null,
};

// Auth branch, only render something if user is authenticated
// or render a fallback
const AuthBranch = props => {
  const { isAuthenticated } = useAuth();
  return (
    <Branch
      {...props}
      condition={isAuthenticated}
    />
  );
};

const AppHeader = props => (
  <header>
    <nav>{...}</nav>
    <AuthBranch
      renderLeft={() => <Avatar />}
      renderRight={() => <LoginButton />}
    />
  </header
);

// Auth route, only render a route if user is authenticated
// otherwise redirect to "/login"
const AuthRoute = props => (
  <AuthBranch
    renderLeft={() => <Route {...props} />}
    renderRight={() => <Redirect to="/login" />}
  />
);

const SomeRoutes = () => (
  <Switch>
    <AuthRoute exact path="/" component={HomePage} />
    <Route path="/login" component={LoginPage} />
  </Switch>
);

// Wrapper branch, wrap children in a wrapper depending
// on a condition
const WrapIf = props => (
  <Branch
    condition={props.condition}
    renderLeft={() => props.renderWrapper(props.children)}
    renderRight={() => React.Children.only(props.children) 
      ? props.children 
      : <React.Fragment>{props.children}</React.Fragment>
    }
  />
);

const NavItem = props => (
  <WrapIf
    condition={props.tooltip}
    renderWrapper={children => (
      <Tooltip message={props.tooltip}>{children}</Tooltip>
    )}
  >
    <li>{...}</li>
  </WrapIf>
);