React Conditional Rendering: Complete Guide with If Statements and JSX

Introduction

A React component is a building block running some Javascript logic, and then returning the UI code in a special Html like syntax known as JSX.

Some UI elements like dropdowns, navbars and so on need to display different things depending on different conditions.

In a React component there are two different ways to conditionally render the UI.

The first one is using if statements directly in the function’s body and return different JSX code depending on the conditions.

The second approach consists of directly embedding the conditions in the JSX code within curly brackets {}.

In this article, we’re going to explore both cases and master JSX conditional rendering. So if that sounds interesting let’s dive in.

Conditional Rendering with If Statements

Let’s say that we have an emoji component that receives a type input prop, that can be either equals to angry or smile .

The corresponding emoji gets rendered depending on the value of type.

We have two ways to achieve this in React.

Right in the Emoji component’s body we can use a branching control flow statement like if or switch case to return the right emoji’s JSX code depending on the type value.

function Emoji({type}: {type: 'angry' | 'smile'}) {
  if(type === 'angry') {  
    return (
      <div>....</div>
    );
  } else if (type === 'sad') {
    return <div>,....</div>;
  } else {
    console.warn("An invalid type prop was passed to Emoji component");
    return null;
  }
}

function App() {
  return (
    <div style={{display: 'flex', gap: '20px'}}>
      <Emoji type="angry" />
      <Emoji type="sad" />
    </div>
  );
}

And then inside the App component, we can call the component multiple times while passing different values to the type prop.

That’s nice and all, but imagine if we needed to update the style of one emoji div, with the current setup we would have to add the styles to every if statement branch which is repetitive and unconvenient.

One solution for that is storing the emoji in a shared local variable, then depending on the type prop value we assign the corresponding emoji.

After that we can wrap the value stored in the variable in a common shared div.

function Emoji({type}: {type: 'angry' | 'smile'}) {
  let emoji;
  if(type === 'angry') {
    emoji = "...";
  } else if (type === 'sad') {
    emoji = "...";
  } else {
    console.warn("An invalid type prop was passed to Emoji component");
    return <>Wrong emoji type</>;
  }
  return <div style="">{emoji}</div>;
}

That was conditional rendering in the Javascript land, let’s now explore conditionally displaying elements directly inside the JSX code.

Conditional Rendering in JSX

We can use the curly brackets {} syntax coupled with the ternary operator which is a shorter Javascript way for representing an if else statement

condition ? exprIfTrue : exprIfFalse;

You can read it as: if some condition is true (question mark) return this expression else (colon) return this alternative expression.

For example let’s say that we want to know the user’s age category and then store it in a variable, we can use a ternary operator which reads as follows: If age is greater or equal 18 return adult else return minor.

const userAgeCategory = age >= 18 ? "adult" : "minor";

Using the ternary operator inside the JSX, will save us from the burden of creating a shared local variable as we did previously or duplicating the styles everywhere.Therefore making the component more maintainable.

function Emoji({type}: {type: 'angry' | 'smile'}) {
  return <div style="">{type === 'angry' ? "..." : "..."}</div>;
}

Using the Logical AND Operator

Now, let’s say that we’ve got an isUserLoggedIn boolean variable, and we want to display the emojis list only when the user is logged in.

We can easily do that with the ternary operator, by displaying the emoji list when the isLoggedIn variable is set to true and returning null when it’s not.

isLoggedIn ? () : null

Instead of verbosely setting null like that we can make it more concise by using the && operator to only render the list when the isLoggedIn variable gets evaluated to true. Javascript by default ignores the second side of an and operator if the first side is set to false.

Note that we should only use the && operator when we’re absolutely sure that the left hand side of the expression is not a number.

A common mistake is to use a number as the condition, that works for most of the cases because Javascript will automatically convert any type used there into a boolean but if it’s of a number type and its value is equal to 0. A Zero will get rendered rather than nothing 😮 which is not what we want obviously.

To fix that we can either add the negation operator ! two times just before the number or convert the number into a condition by comparing it with another number such as age >= 18 for example.

Conclusion

So with conditional rendering we can make a React component display different things depending on a bunch of conditions which are either defined at the Javascript logic side just before rendering the JSX, using control flow statements like if or switch case or directly embedding the condition inside the JSX Markup, within the curly brackets using either the ternary operator or the logical && operator.