Conditional Rendering in React: Six Practical Patterns

Conditional rendering in React means deciding what a component shows based on its data. Because JSX compiles to JavaScript, there is no special template syntax. You use the same if statements, ternaries, and logical operators you already know.

A component can show a packed label for one item and a plain label for another. Here is that idea as a ternary:

App.jsx

function Item({ name, isPacked }) {
  return <li>{isPacked ? name + " (packed)" : name}</li>;
}

When isPacked is true, the list item reads "Space suit (packed)." When it is false, the item reads only the name. The condition lives in the markup, and React renders one of the two results.

Six patterns for conditional rendering

Each pattern below solves the same problem in a slightly different way. They all produce valid JSX, so choose the one that stays readable as the condition grows.

1. Early return with if

The simplest pattern returns the unusual case first and lets the rest of the function run only when the condition passes.

App.jsx

function Status({ message }) {
  if (!message) {
    return <p>No status yet.</p>;
  }
 
  return <p>{message}</p>;
}

When message is empty, the page shows "No status yet." Otherwise it shows the message. The early return keeps the fallback separate from the main output.

2. if and else returning different JSX

When both branches are equally important, write them side by side with if and else.

App.jsx

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li>{name} (packed)</li>;
  }
  return <li>{name}</li>;
}

The packed item gets a suffix, and the rest stay plain. This reads clearly, but it duplicates the surrounding list item tag.

3. Ternary operator

A ternary condenses an either or choice into one expression. Use it when both branches fit on one line and you want to stay inside the JSX.

App.jsx

function Item({ name, isPacked }) {
  return <li>{isPacked ? name + " (packed)" : name}</li>;
}

The markup no longer repeats the list item tag. The question mark separates the condition from the true branch, and the colon separates the true branch from the false branch.

4. Logical AND operator

The AND operator renders its right side only when the left side is truthy. It is the shortest way to show something or nothing.

App.jsx

function Item({ name, isPacked }) {
  return <li>{name} {isPacked && "(packed)"}</li>;
}

The packed label appears only when isPacked is true. When the condition is false, React renders nothing in its place.

5. Assign JSX to a variable

For a longer condition, store the result in a variable and render the variable.

App.jsx

function Item({ name, isPacked }) {
  let label = name;
 
  if (isPacked) {
    label = name + " (packed)";
  }
 
  return <li>{label}</li>;
}

The label starts as the name and changes only when needed. This is the most flexible pattern because the if block can grow without crowding the markup.

6. Return null

When a component should disappear from the screen entirely, return null.

App.jsx

function Item({ name, hidden }) {
  if (hidden) {
    return null;
  }
 
  return <li>{name}</li>;
}

A hidden item renders nothing, and React leaves no element in the list. In practice, filtering the data before rendering is often clearer, as the list guide explains.

Choose the right pattern

Start with an early return when one case is an exception. Reach for a ternary when both branches are short and belong in the markup. Use the AND operator to show or hide a small piece, and switch to a variable when the logic no longer fits on one line.

The braces that hold these expressions are covered in the guide on rendering variables and expressions in JSX. For hiding items inside a list, the guide on rendering lists with map shows filtering with stable keys.