Conditional Rendering in React

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.

Conditionally returning JSX 

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>
 );
}

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>;

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>
 );
}

Conditionally returning nothing with null 

In some situations, you won’t want to render anything at all. For example, say you don’t want to show packed items at all. A component must return something. In this case, you can return null:

if (isPacked) {
  return null;
}
return <li className="item">{name}</li>;

If isPacked is true, the component will return nothing, null. Otherwise, it will return JSX to render.

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>

is very similar to

<li className="item">{name}</li>

Both of the conditional branches return <li className="item">...</li>:

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

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>;

You can write this:

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

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