Lesson #10 of 13 in Getting Started with React

Hiding and Showing in JSX

Hiding and showing elements from our users is one of the most common things we have to do in our applications. This is one of the things that threw me off when starting with JSX.

A common example for when we'd need this is a logged out user should see the Login button and a logged in user should see the Logout button.

In JSX, we can hide and show things using the &&. We can show a condition and then show an element if that condition is true.

&& is called the logical AND operator. Read more here.

Here we show a message only if a user exists:

jsx
return (
  <div>

   {user && <h1>Hello person!</h1>}

  </div>
);

We are using the JSX brackets and React will evaluate anything inside those brackets. We'll check for that user and then show the <h1> only if the user exists.

Let's show a Logout button based on if a user is logged in:

jsx
function App() {
  const isLoggedIn = true;

  return (
    <div>

      {/* show the logout button if the user is logged in */}
      {isLoggedIn && <a href="/logout">Logout</a>}

    </div>
  );
}

We are checking to see if isLoggedIn is true. If that condition is true, React will show anything after the &&.

We are essentially saying "Check if this condition is true and then show this thing!"

We can even do a comparison check to see if a condition is met:

jsx
function App() {
  const user = { name: 'chris', role: 'admin' };

  return (
    <div>

      {/* only show if the user is an admin */}
      {user.role === 'admin' && <a href="/manage">Manage</a>}

    </div>
  );
}

You can also simplify the above so that it is a bit more readable by creating an isAdmin boolean.

jsx
function App() {
  const user = { name: 'chris', role: 'admin' };

  // create a boolean so we can simplify our template
  const isAdmin = user.role === 'admin';

  return (
    <div>

      {/* only show if the user is an admin */}
      {isAdmin && <a href="/manage">Manage</a>}

    </div>
  );
}

Let's see how we can show a Login button now:

jsx
function App() {
  const isLoggedIn = true;

  return (
    <div>

      {/* show the login button if the user is logged out */}
      {!isLoggedIn && <a href="/login">Login</a>}

      {/* show the logout button if the user is logged in */}
      {isLoggedIn && <a href="/logout">Logout</a>}

    </div>
  );
}

Notice how we are using !isLoggedIn to check for the opposite of if the user is logged in.

In addition to single conditions, we can make sure that multiple conditions are met before showing something.

In this instance, we want to make sure the user is active and the user is a subscriber:

jsx
function App() {
  const isActive = true;
  const isSubscriber = true;

  return (
    <div>

      {/* only show if active and a subscriber */}
      {isActive && isSubscriber && <a href="/manage">Manage</a>}

    </div>
  );
}

In addition to the logical AND operator, we can use ternary operators to simplify showing two conditions.

jsx
function App() {
  const isLoggedIn = true;
  const isSubscriber = true;

  return isLoggedIn 
    ? <div>i am logged in</div>
    : <div>i am logged out</div>;
}

Here's another example of an inline ternary. As long as the ternary is inside curly brackets, then React will evaluate the ternary operator.

jsx
function App() {
  const isLoggedIn = true;

  return (
    <div>

      {/* only show if active and a subscriber */}
      {isLoggedIn                     
        ? <div>i am logged in</div>
        : <div>i am logged out</div>
      }

    </div>
  );
}
Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)