Conditional rendering

Conditional rendering means showing different UI depending on application data. React uses normal JavaScript conditions to decide what should be displayed.

1 Why Conditional Rendering?

Real applications constantly need to show different UI states.

• Show Login when the user is not authenticated.
• Show Dashboard after login.
• Show Loading while an API request is running.
• Show an error when a request fails.
• Show a product as available or unavailable.

2 if Statement

The simplest approach is to return different JSX using a normal JavaScript if statement.

function Welcome({ isLoggedIn }) {
    if (isLoggedIn) {
        return <h1>Welcome Back</h1>;
    }

    return <h1>Please Log In</h1>;
}

3 Ternary Operator

The ternary operator is useful when there are two possible UI results.

function Welcome({ isLoggedIn }) {
    return (
        <div>
            {isLoggedIn
                ? <p>Welcome Back</p>
                : <p>Please Log In</p>}
        </div>
    );
}

4 Logical AND

The && operator is useful when something should be displayed only when a condition is true.

function Cart({ count }) {
    return (
        <div>
            <h2>Shopping Cart</h2>

            {count > 0 && (
                <p>You have {count} items.</p>
            )}
        </div>
    );
}

5 Important && Behavior

Be careful when the left side can be the number 0.

{count && <p>Items available</p>}

If count is 0, JavaScript evaluates the expression to 0. In JSX this can result in an unwanted zero being rendered. A comparison is clearer:

{count > 0 && (
    <p>Items available</p>
)}

6 Loading, Success, and Error States

API-driven applications often have several UI states.

function UserList({
    loading,
    error,
    users
}) {
    if (loading) {
        return <p>Loading...</p>;
    }

    if (error) {
        return <p>Unable to load users.</p>;
    }

    if (users.length === 0) {
        return <p>No users found.</p>;
    }

    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>
                    {user.name}
                </li>
            ))}
        </ul>
    );
}

7 Conditional Rendering Flow

flowchart TD
A[Component State] --> B{Loading?}
B -->|Yes| C[Show Loading]
B -->|No| D{Error?}
D -->|Yes| E[Show Error]
D -->|No| F{Data Available?}
F -->|No| G[Show Empty State]
F -->|Yes| H[Show Data]

8 Conditional Classes

Conditions can also be used to change a class.

function Status({ active }) {
    return (
        <div
            className={
                active
                    ? "status active"
                    : "status inactive"
            }
        >
            {active ? "Active" : "Inactive"}
        </div>
    );
}

9 Conditional Buttons

function UserActions({ isAdmin }) {
    return (
        <div>
            <button>Profile</button>

            {isAdmin && (
                <button>Admin Settings</button>
            )}
        </div>
    );
}

10 Multiple Conditions

For many conditions, nested ternary operators can become difficult to read. A normal if statement or separate component is usually clearer.

function PaymentStatus({ status }) {
    if (status === "pending") {
        return <p>Payment Pending</p>;
    }

    if (status === "success") {
        return <p>Payment Successful</p>;
    }

    if (status === "failed") {
        return <p>Payment Failed</p>;
    }

    return <p>Unknown Status</p>;
}

11 Conditional Rendering and State

function LoginPage() {
    const [loggedIn, setLoggedIn] =
        useState(false);

    return (
        <div>
            {loggedIn
                ? <Dashboard />
                : <Login
                    onLogin={() => setLoggedIn(true)}
                  />}
        </div>
    );
}

12 Complete Example — Order Status

function OrderStatus({ status }) {
    if (status === "processing") {
        return (
            <section>
                <h2>Order Processing</h2>
                <p>Your order is being prepared.</p>
            </section>
        );
    }

    if (status === "shipped") {
        return (
            <section>
                <h2>Order Shipped</h2>
                <p>Your order is on the way.</p>
            </section>
        );
    }

    if (status === "delivered") {
        return (
            <section>
                <h2>Delivered</h2>
                <p>Your order has arrived.</p>
            </section>
        );
    }

    return (
        <section>
            <h2>Unknown Status</h2>
        </section>
    );
}

13 Common Mistakes

• Using deeply nested ternary expressions.
• Using condition && when the condition can be zero and accidentally displaying zero.
• Putting complicated business logic directly inside JSX.
• Forgetting loading, error, and empty states for asynchronous data.
• Duplicating large UI blocks instead of extracting a component.

14 Interview Questions

1. What is conditional rendering?
2. How can you use if statements in React?
3. When would you use a ternary operator?
4. What is the use of logical AND in JSX?
5. What problem can occur when using 0 && JSX?
6. How would you display loading, error, and empty states?
7. When should conditional logic be moved into another component?

15 Key Takeaways

• React uses normal JavaScript conditions for conditional rendering.
• Use if for larger or multiple conditions.
• Use ternary for simple two-way choices.
• Use && for simple true-only rendering.
• Always consider loading, error, and empty states in data-driven UI.

Conclusion

Conditional rendering is simply the process of deciding what UI should appear for the current state. The best approach is usually the simplest one: use normal JavaScript conditions and keep complicated decisions outside the JSX when necessary.