React Context API Logged-in content helpers

helpers.tsx

export const LoggedInContent: FC<{}> = props => (
  <AuthContext.Consumer>
    {(auth): React.ReactNode => (auth && auth.token ? props.children : null)}
  </AuthContext.Consumer>
);

/**
 * Helper to show content only if the user is logged out.
 */
export const LoggedOutContent: FC<{}> = props => (
  <AuthContext.Consumer>
    {(auth): React.ReactNode => (!auth || !auth.token ? props.children : null)}
  </AuthContext.Consumer>
);

home.tsx

<LoggedInContent>
  <Text>LOGGED IN!</Text>
</LoggedInContent>
<LoggedOutContent>
  <Text>NOT LOGGED IN!</Text>
</LoggedOutContent>