In this tutorial we will learn how to show or hide parts of the UI based on conditions. Conditional rendering is one of the most important skills in React, because real applications rarely display everything all at once. By the end, you will know several clean techniques for rendering UI only when it is needed.

What Is Conditional Rendering?

Conditional rendering means:

Show this UI if a certain condition is true. Hide it or show something else if not.

Examples:

• Show a login button if the user is logged out
• Show a dashboard if the user is logged in
• Show a loading spinner while data is loading
• Show an error message if something failed

React renders components based on the conditions you describe.

Technique 1: Using if Statements (Outside JSX)

When the logic is more complex, use a plain if statement before returning JSX.

Example:

export default function Welcome({ loggedIn }) {
  if (!loggedIn) {
    return <h1>Please log in</h1>;
  }
 
  return <h1>Welcome back</h1>;
}

This is the clearest and most beginner friendly way to handle conditional UI.

Technique 2: Using Ternary Operators (Inline)

The ternary operator allows you to choose between two JSX elements inline. The Ternary Operator is a concise way to handle simple conditions directly within your JSX.

Syntax:

condition ? showIfTrue : showIfFalse

Example:

export default function Greeting({ name }) {
  return (
    <h1>
      {name ? `Hello, ${name}` : "Hello, guest"}
    </h1>
  );
}

Use a ternary when you are choosing between two options.

Technique 3: Using Logical AND (&&) for Simple Conditions

When you want to show something only if a condition is true, but show nothing otherwise, use &&.

Example:

export default function CartMessage({ items }) {
  return (
    <>
      <h1>Your Cart</h1>
      {items.length === 0 && <p>Your cart is empty</p>}
    </>
  );
}

This says: If items.length === 0 is true, show the message. If not, show nothing.

Use this only when there is no "else" UI.

Technique 4: Rendering Different Components

Sometimes you want to swap entire components based on a condition.

Example:

import LoginScreen from "./LoginScreen.jsx";
import Dashboard from "./Dashboard.jsx";
 
export default function App({ user }) {
  return user ? <Dashboard /> : <LoginScreen />;
}

React makes switching UI this simple: Just describe what should appear for each case.

Technique 5: Rendering Fallback UI (Loading States)

A common use case is showing something while waiting for data.

Example:

export default function UserProfile({ user, loading }) {
  if (loading) {
    return <p>Loading profile...</p>;
  }
 
  return <h1>{user.name}</h1>;
}

First show a fallback, then show the actual content.

Technique 6: Using Early Returns for Clean Code

When multiple conditions exist, use early returns to keep your JSX readable.

Example:

export default function Status({ status }) {
  if (status === "loading") {
    return <p>Loading...</p>;
  }
 
  if (status === "error") {
    return <p>Something went wrong</p>;
  }
 
  return <p>Loaded successfully</p>;
}

This avoids deeply nested conditions and makes your logic easy to understand.

Example: Combining Techniques

Create a file:

src/ConditionalExample.jsx

Add:

export default function ConditionalExample({ user, loading }) {
  if (loading) {
    return (
      <>
        <title>Loading Example</title>
        <meta name="description" content="Conditional rendering example" />
 
        <p>Loading user...</p>
      </>
    );
  }
 
  return (
    <>
      <title>User Example</title>
      <meta name="description" content="Conditional UI rendering" />
 
      {user ? (
        <h1>Welcome, {user.name}</h1>
      ) : (
        <h1>No user found</h1>
      )}
    </>
  );
}

This example shows:

• Early returns
• Ternaries
• Conditional content based on data

You now have a complete set of tools for real-world scenarios.

When Should You Use Each Technique?

Choose the technique that makes your component easiest to understand.

Conditional rendering is simply telling React which UI to show based on your data. Whether you use if statements, ternaries, or logical operators, all techniques follow the same rule: describe the UI you want, and React will render it.