How to conditionally render an element or text in React?

Question

How to conditionally render an element or text in React?

Answer

Conditional rendering in React works the same way as JS — you just decide what to render inside JSX.

Using if statements:

if (isLoggedIn) {
  return <Dashboard />;
} else {
  return <Login />;
}

Using ternary operators:

<div>{isDark ? 'Dark Mode' : 'Light Mode'}</div>

Using logical AND:

{
  notifications.length > 0 && (
    <p>You have {notifications.length} new notifications!</p>
  );
}

Real-World Example

• Show/hide buttons or loaders
• Toggle UI elements based on authentication or user actions

Quick Practice

Build a component that shows “Welcome!” if logged in, and “Please log in” otherwise.

Summary

Use standard JS conditions (if, ? :, &&) inside JSX for conditional UI logic.