Introduction

Typically, as a beginner learning React, the concept of conditional statements might be something you are very familiar with but conditional rendering, not so much. However, if you do understand the concepts of conditional rendering in React but need a refresher, or are trying to see how it’s really done, then keep on reading.

Just like how you can show data on the console, or execute a function based on a condition; a component in React can also render based on a condition. And the whole idea of how the conditional statements are orchestrated does not differ.

Here is a list of concepts you need to be familiar with in order to understand this article.

• Basic knowledge of React hooks (useState hook, JSX).
• Conditional statements in JavaScript

If you are unfamiliar with the prerequisites, consider Reading this article on React Hooks and this on Conditional statements.

Conditional Statements

In programming, conditional statements perform different actions based on different conditions. These are basically ifs and elses.

Types of Conditional Statements

• The if, else, and else if operators
• Ternary Operators
• Logical Operators (&&, ||)

Using the if and else Operators

Assuming, you need to show a login link in a component when a user is not logged in but show a welcome message when a user is logged in. Let's say you have a boolean state variable named isLoggedIn which is true if a user is logged in and false if a user is not.

We can render either the login link or welcome message based on the value of the isLoggedIn state variable using if and else. And here is how:

const App = () => {
  const [isLoggedIn, setLoggedIn] = useState(false) // user is not authenticated

  if (isLoggedIn) {
    return <h1>Welcome User</h1>
  } else {
    return <a href='/login'>Go to Login page</a> // since user is not authenticated, login link will be rendered
  }

}

export default App;

Using the Ternary Operator

You can use Ternary operators to render components within a JSX (JavaScript XML) expression.

Since we can not use if and else within JSX, the Ternary operator is the ideal conditional statement to use. Example:

const App = () => {
  const [isLoggedIn, setLoggedIn] = useState(false) // user is not authenticated

 return (
    <nav>
      <ul>
          <li>Home</li>
          <li>About</li>
          <li>{isLoggedIn ? <span>Welcome User</span> : <a href='/login'>Go to Login page</a>}</li>
      </ul>
    </nav>
  )

}

export default App;

Using the Logical Operators &&, and ||.

If you don't want to use Ternary operators, you can choose to use the Logical operators to conditionally render a component. Assuming, you want to show a variable within a JSX expression, but you are not sure whether that variable is specified. You can use the logical and (&&) operator to show the variable conditionally, for example:

const App = () => {
  const [profile, setProfile] = useState({
  name: "John Doe", //name is not empty
  age: "", //age is empty, not specified
}) 

  return (
      <ul>
        <li>Name: {profile.name && profile.name}</li>
        <li>Age: {profile.age && profile.age}</li>
      </ul>
  )

}

export default App;

However, if you want to show another value when the age is not specified, like Age not available. You can use the logical or (||) operator for that. Example:

const App = () => {
  const [profile, setProfile] = useState({
  name: "John Doe", //name is not empty
  age: "", //age is empty, not specified
}) 

  return (
      <ul>
        <li>Name: {profile.name && profile.name}</li>
        <li>Age: {profile.age && profile.age || 'Age not available'}</li>
      </ul>
  )

}

export default App;

Now, Age not available will be shown since profile.age is an empty string.