React Conditional Rendering

Conditional rendering means showing different UI depending on a condition. In React, you do this using plain JavaScript: if statements, ternary operators, and the && operator.

There is no special template syntax like v-if or *ngIf. If you already know JavaScript, you already have the tools.

Method 1: if/else returning different JSX

The simplest approach is a regular if statement before the return:

function StatusMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please log in.</h1>;
  }
}

Or with an early return (which avoids the else entirely):

function StatusMessage({ isLoggedIn }) {
  if (!isLoggedIn) {
    return <p>Please log in.</p>;
  }

  return <h1>Welcome back!</h1>;
}

Early returns are useful when one condition leads to a simple output (like a loading state or error message) and the main content is more complex.

Method 2: Ternary operator

The ternary operator (condition ? valueIfTrue : valueIfFalse) is the most common way to conditionally render inside JSX:

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

This works well when you need to choose between two pieces of JSX in the middle of a larger render. It is compact and stays inside the return statement.

You can also use it inline for small differences:

function Button({ isLoading }) {
  return (
    <button disabled={isLoading}>
      {isLoading ? 'Saving...' : 'Save'}
    </button>
  );
}

Avoid deeply nested ternaries. If you find yourself writing a ? b : c ? d : e, switch to an if statement or a helper variable instead.

Method 3: The && operator

Use && when you want to render something or render nothing:

function Notification({ hasMessage, message }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {hasMessage && <p className="notification">{message}</p>}
    </div>
  );
}

If hasMessage is true, React renders <p className="notification">...</p>. If hasMessage is false, React renders nothing.

The falsy value bug

This is one of the most common mistakes in React. Be careful when the left side of && can be 0 or another falsy non-boolean value.

// Bug: when count is 0, this renders the number 0 on screen, not nothing
{count && <p>You have {count} items.</p>}

When count is 0, the expression evaluates to 0 (a falsy number). React renders 0 to the DOM because 0 is a valid React child, unlike false or null.

The fix is to compare explicitly:

// Correct: always evaluates to true or false, never to 0
{count > 0 && <p>You have {count} items.</p>}

Or use a ternary:

{count > 0 ? <p>You have {count} items.</p> : null}

This bug shows up often with array.length && <Component />. Always convert to a boolean first when using && with numbers.

Method 4: Returning null to hide a component

A component can return null to render nothing at all:

function SuccessBanner({ show }) {
  if (!show) return null;

  return (
    <div className="banner">
      Your changes have been saved!
    </div>
  );
}

Returning null is the cleanest way to hide a component entirely based on a condition. The component still exists in the tree but produces no DOM output.

Choosing between methods

Common mistakes

Using && with numbers.

As covered above: {count && <List />} renders 0 when count is 0. Always guard with an explicit boolean check.

Nesting ternaries.

// Hard to read
{a ? b : c ? d : e}

// Much clearer
const content = a ? b : (c ? d : e);
// Or better yet:
let content;
if (a) content = b;
else if (c) content = d;
else content = e;

FAQ

Can I use an if statement inside JSX?

No, not directly. JSX expressions only accept expressions, not statements. if is a statement. You have two options:

• Move the if above the return and store the result in a variable
• Use a ternary (? :) or && inside JSX, since those are expressions

// Option 1: variable above the return
function App({ user }) {
  let content;
  if (user.isAdmin) {
    content = <AdminPanel />;
  } else {
    content = <UserDashboard />;
  }

  return <div>{content}</div>;
}

// Option 2: ternary inside JSX
function App({ user }) {
  return (
    <div>
      {user.isAdmin ? <AdminPanel /> : <UserDashboard />}
    </div>
  );
}

What to learn next

• useState : how to store and change the conditions that drive conditional rendering
• React Lists : how to render arrays of elements