Alternative implementation of LoggedInBanner.

javascript.js

// Alternative code, from my tweet:
 
// Generic, reusable Banner component
function Banner({ type, children }) {
  const bg = type === 'success' ? 'green' : 'red';
 
  return (
    <div
      className={styles.banner}
      style={{ backgroundColor: bg }}
    >
      {children}
    </div>
  );
}
 
// Generic, reusable only display for logged in:
function OnlyDisplayIfLoggedIn({ user, children }) {
  // Only logged in users are allowed to see.
  if (!user) {
    return null;
  }
 
  return <>{children}</>;
}


// Follow up tweet contrasting usage.

<LoggedInBanner type={type} user={user}>
  <p>Hello</p>
</LoggedInBanner>

// vs.

<OnlyDisplayIfLoggedIn user={user}>
  <Banner type={type}>
    <p>Hello</p>
  </Banner>
</OnlyDisplayIfLoggedIn>