Show the username in the header

I want to hide the Log in and Sign up buttons if the user is logged in, and I want to show their email instead.

Let’s move to the components/Header.js file. In there, we have our component rendering those 2 buttons:

components/Header.js

<ul>
  <li>
    <a href='#' onClick={() => setShowRegistrationModal()}>
      Sign up
    </a>
  </li>
  <li>
    <a href='#' onClick={() => setShowLoginModal()}>
      Log in
    </a>
  </li>
</ul>

We are already importing useStoreActions, so let’s add useStoreState:

import { useStoreActions, useStoreState } from 'easy-peasy'

const user = useStoreState(state => state.user.user)

after the setShowLoginModal and setShowRegistrationModal declarations.

Next, we check for this value in the JSX:

<ul>
  {user ? (
    <li className='username'>{user}</li>
  ) : (
    <>
      <li>
        <a href='#' onClick={() => setShowRegistrationModal()}>
          Sign up
        </a>
      </li>
      <li>
        <a href='#' onClick={() => setShowLoginModal()}>
          Log in
        </a>
      </li>
    </>
  )}
</ul>

Let’s also add some CSS in the style block to better present the username:

.username {
  padding: 1em 0.5em;
}

Awesome! Here’s our result:

---

Go to the next lesson