Conditional Rendering in React

Conditional rendering means showing different UI based on a condition.

In React, you can render components differently depending on state, props, or any value.

Get Nimmikrishnab’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Since JSX is essentially JavaScript, we use standard JavaScript logic — like if statements, ternary operators, and logical AND (&&)—to control our output.

Using if Statement (The Basic Approach)

Because if statements don't work inside a JSX return block, you must use them before the return.

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Welcome back!</h2>;
  }

  return <h2>Please log in.</h2>;
}

Ternary Operator (condition ? true : false)

Most commonly used, it allows you to write conditional logic directly inside your JSX, making it perfect for small, inline changes.

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

Logical AND Operator (&&)

&& operator renders a component only if a condition is true, and nothing if it’s false.

function Notification({ hasMessage }) {
  return (
    <div>
      {hasMessage && <p>You have a new message!</p>}
    </div>
  );
}
// If hasMessage is true → the <p> renders
// if false → nothing renders

This works because:

• true && something → returns something
• false && something → returns false (renders nothing)

Switch Statements (Handling Multiple States)

When you have more than two or three possible outcomes (like a status that could be “loading”, “error”, “success”, or “idle”), a switch statement or a lookup object is much cleaner than nested ternaries.

function StatusMessage({ status }) {
  switch (status) {
    case 'loading':
      return <Spinner />;
    case 'error':
      return <ErrorMessage />;
    case 'success':
      return <SuccessCheckmark />;
    default:
      return null;
  }
}

Prevent Rendering with null

In some cases, you might want a component to hide itself based on its own props or state. To do this, simply return null. This tells React to render "nothing," but the component's lifecycle still functions behind the scenes.

function WarningMessage({ show }) {
  // If show is false, render nothing
  if (!show) {
    return null;
  }

  return <p style={{ color: "red" }}>⚠ Warning!</p>;
}
function App() {
  return (
    <div>
      <WarningMessage show={false} />
      <WarningMessage show={true} />
    </div>
  );
}
// When show={false} → component returns null → nothing appears in the UI.
// When show={true} → the warning message renders.

Variable Injection

You can assign JSX to a variable and then inject that variable into your return. This keeps the main return block clean.

let content;
if (isLoading) {
  content = <Loader />;
} else {
  content = <MainData />;
}

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

Conclusion

• Use if/else for complex logic outside the JSX return.
• Use Ternaries (? :) for simple "either/or" scenarios inside JSX.
• Use Logical AND (&&) when you only need to show something if a condition is met.
• Use Switch or Objects for multiple mutually exclusive conditions.
• Return null to prevent a component from appearing.