React Conditional Rendering: Syntax, Usage, and Examples

React conditional rendering lets you control what appears in the UI based on state, props, or logic. Instead of rendering everything all the time, you can conditionally display components, elements, or text based on certain conditions.

How to Use Conditional Rendering in React

Conditional rendering in React can be implemented in multiple ways, including if-else statements, the ternary operator, and logical operators.

If-Else Conditional Rendering

If-else statements let you conditionally return different JSX elements.

                  

                    jsx
                    
                      
                    
                  
                  

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

                  
                

Ternary Operator

The ternary operator is a concise way to handle conditional rendering inside JSX.

                  

                    jsx
                    
                      
                    
                  
                  

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

                  
                

Logical AND (&&)

The logical AND (&&) operator renders an element only when a condition is true.

                  

                    jsx
                    
                      
                    
                  
                  

                    function Alert({ hasError }) {
  return <>{hasError && <p>Error: Something went wrong.</p>}</>;
}

                  
                

When to Use Conditional Rendering in React

Conditional rendering helps manage UI behavior dynamically. Use it when:

Displaying UI Based on Authentication

You can show different components depending on whether a user is logged in.

                  

                    jsx
                    
                      
                    
                  
                  

                    function AuthButton({ isAuthenticated }) {
  return isAuthenticated ? <button>Logout</button> : <button>Login</button>;
}

                  
                

Handling Empty or Loading States

Instead of displaying empty content, you can render placeholders or loading indicators.

                  

                    jsx
                    
                      
                    
                  
                  

                    function DataDisplay({ data }) {
  if (!data) {
    return <p>Loading...</p>;
  }

  return <p>Data: {data}</p>;
}

                  
                

Toggling Features or UI Components

Certain UI components should only appear when specific conditions are met.

                  

                    jsx
                    
                      
                    
                  
                  

                    function Notifications({ showNotifications }) {
  return (
    <div>
      {showNotifications && <p>You have new messages!</p>}
    </div>
  );
}

                  
                

Examples of Conditional Rendering in React

Conditional Component Rendering

You can render different components based on a condition.

                  

                    jsx
                    
                      
                    
                  
                  

                    function UserGreeting() {
  return <h1>Welcome, User!</h1>;
}

function GuestGreeting() {
  return <h1>Welcome, Guest!</h1>;
}

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
}

                  
                

Inline Conditional Rendering

For simple conditions, you can inline the logic inside JSX.

                  

                    jsx
                    
                      
                    
                  
                  

                    function Status({ online }) {
  return <p>Status: {online ? "Online" : "Offline"}</p>;
}

                  
                

Multiple Conditional Rendering

You can chain multiple conditions to determine what to render.

                  

                    jsx
                    
                      
                    
                  
                  

                    function UserStatus({ user }) {
  return (
    <>
      {user.isAdmin ? (
        <p>Admin Access</p>
      ) : user.isMember ? (
        <p>Member Access</p>
      ) : (
        <p>Guest Access</p>
      )}
    </>
  );
}

                  
                

Learn More About Conditional Rendering in React

Conditional Component Rendering React

Instead of conditionally showing elements, you can dynamically render entire components. This is useful when switching between different UI layouts.

                  

                    jsx
                    
                      
                    
                  
                  

                    function Dashboard() {
  return <h1>Admin Dashboard</h1>;
}

function Home() {
  return <h1>User Home</h1>;
}

function App({ isAdmin }) {
  return isAdmin ? <Dashboard /> : <Home />;
}

                  
                

If-Else Conditional Rendering React

Using a function to return JSX based on an if-else condition can keep code clean.

                  

                    jsx
                    
                      
                    
                  
                  

                    function UserGreeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Hello, User!</h1>;
  }
  return <h1>Please sign in.</h1>;
}

                  
                

Inline Conditional Rendering React

Inline rendering helps reduce extra lines of code when conditions are simple.

                  

                    jsx
                    
                      
                    
                  
                  

                    function ShoppingCart({ items }) {
  return <p>{items.length > 0 ? `You have ${items.length} items` : "Cart is empty"}</p>;
}

                  
                

React Animate Conditional Rendering

When conditionally rendering elements, animations help improve the UI experience.

                  

                    jsx
                    
                      
                    
                  
                  

                    import { useState } from "react";
import { CSSTransition } from "react-transition-group";

function AnimatedAlert({ show }) {
  return (
    <CSSTransition in={show} timeout={300} classNames="fade" unmountOnExit>
      <p className="alert">Warning: Action required!</p>
    </CSSTransition>
  );
}

                  
                

Multiple Conditional Rendering React

Combining different conditions allows complex UI logic without unnecessary nesting.

                  

                    jsx
                    
                      
                    
                  
                  

                    function SubscriptionMessage({ status }) {
  return (
    <p>
      {status === "active"
        ? "Your subscription is active."
        : status === "expired"
        ? "Your subscription has expired."
        : "You don't have a subscription."}
    </p>
  );
}

                  
                

React conditional rendering helps control what appears in the UI based on different factors like user authentication, data availability, or component state. By using techniques like if-else statements, the ternary operator, and logical operators, you can manage the display of UI elements.