DEV Community

Cover image for Conditional Rendering in React
Omotoso Abosede Racheal
Omotoso Abosede Racheal

Posted on

Conditional Rendering in React

Introduction

Conditional Rendering in React refers to the technique of displaying components or element based on certain conditions. Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.

Prerequisite

  • HTML

  • Javascript

What you will learn

  • How to return different JSX depending on a condition

  • How to conditionally include or exclude a piece of JSX

  • Common conditional syntax shortcuts you’ll encounter in React codebases

How to return different JSX depending on a condition

Let’s say you have a PackingList component rendering several Items, which can be marked as packed or not:

function Item({ name, isPacked }) {
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}
Enter fullscreen mode Exit fullscreen mode

Notice that some of the Item components have their isPacked prop set to true instead of false. You want to add a checkmark (✔) to packed items if isPacked={true}.

You can write this as an if/else statement like so:

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;
Enter fullscreen mode Exit fullscreen mode

If the isPacked prop is true, this code returns a different JSX tree. With this change, some of the items get a checkmark at the end:

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✔</li>;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}
Enter fullscreen mode Exit fullscreen mode

Conditionally including JSX
In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output:

<li className="item">{name} ✔</li>
Enter fullscreen mode Exit fullscreen mode

Is very similar to

<li className="item">{name}</li>
Enter fullscreen mode Exit fullscreen mode

Both of the conditional branches return

<li className="item">...</li>
Enter fullscreen mode Exit fullscreen mode
if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;
Enter fullscreen mode Exit fullscreen mode

While this duplication isn’t harmful, it could make your code harder to maintain. What if you want to change the className? You’d have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more DRY.

Conditional (ternary) operator (? :)
JavaScript has a compact syntax for writing a conditional expression — the conditional operator or “ternary operator”.

Instead of this:

if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;
Enter fullscreen mode Exit fullscreen mode

You can write this:

return (
  <li className="item">
    {isPacked ? name + ' ✔' : name}
  </li>
);
Enter fullscreen mode Exit fullscreen mode

You can read it as “if isPacked is true, then (?) render name + ' ✔', otherwise (:) render name”.

Now let’s say you want to wrap the completed item’s text into another HTML tag, like 'del' to strike it out. You can add even more newlines and parentheses so that it’s easier to nest more JSX in each of the cases:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✔'}
        </del>
      ) : (
        name
      )}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

Enter fullscreen mode Exit fullscreen mode

Logical AND operator (&&)
Another common shortcut you’ll encounter is the JavaScript logical AND (&&) operator. Inside React components, it often comes up when you want to render some JSX when the condition is true, or render nothing otherwise. With &&, you could conditionally render the checkmark only if isPacked is true

return (
  <li className="item">
    {name} {isPacked && '✔'}
  </li>
);
Enter fullscreen mode Exit fullscreen mode

You can read this as “if isPacked, then (&&) render the checkmark, otherwise, render nothing”.

Here it is in action

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

Enter fullscreen mode Exit fullscreen mode

A JavaScript && expression returns the value of its right side (in our case, the checkmark) if the left side (our condition) is true. But if the condition is false, the whole expression becomes false. React considers false as a “hole” in the JSX tree, just like null or undefined, and doesn’t render anything in its place.

Conditionally assigning JSX to a variable
When the shortcuts get in the way of writing plain code, try using an if statement and a variable. You can reassign variables defined with let, so start by providing the default content you want to display, the name

let itemContent = name;
Enter fullscreen mode Exit fullscreen mode

Use an if statement to reassign a JSX expression to itemContent if isPacked is true:

if (isPacked) {
  itemContent = name + " ✔";
}
Enter fullscreen mode Exit fullscreen mode

This style is the most verbose, but it’s also the most flexible. Here it is in action

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = name + " ✔";
  }
  return (
    <li className="item">
      {itemContent}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Space suit" 
        />
        <Item 
          isPacked={true} 
          name="Helmet with a golden leaf" 
        />
        <Item 
          isPacked={false} 
          name="Photo of Tam" 
        />
      </ul>
    </section>
  );
}

Enter fullscreen mode Exit fullscreen mode

If you’re not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code — and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work.

Conclusion

  1. In React, you control branching logic with JavaScript.
    You can return a JSX expression conditionally with an if statement.

  2. You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.
    In JSX, {cond ? : } means “if cond, render , otherwise ”.

  3. In JSX, {cond && } means “if cond, render , otherwise nothing”.

  4. The shortcuts are common, but you don’t have to use them if you prefer plain if.

Top comments (3)

Collapse
 
chidinma_nwosu profile image
Chidinma Nwosu

Wow! This article makes understanding conditional rendering in React a walk in the park. I am definitely looking forward to more articles from you

Collapse
 
stan015 profile image
Stanley Azi

This is well detailed 🔥
I would love to read more of your articles with explainer code blocks as this! 😀
Well done! 🚀

Collapse
 
faave profile image
Favour Ukonu

💪Thank you Racheal for your comprehensive guide to React Conditional Rendering.✨