When should I use a ternary operator versus an if statement in React?

Use a ternary inside JSX when you need to choose between two inline values or elements. Reach for an if statement when the logic is complex or you're returning entirely different component trees, since it keeps your JSX cleaner and the logic easier to test.

Why is my component rendering '0' instead of nothing when using &&?

The && operator short-circuits to the left operand when it's falsy, and React renders the number 0. Convert the left side to a boolean first: use !!count && or count > 0 && to avoid this.

How do I conditionally render a component based on multiple conditions in React?

Use a switch statement or extract the logic into a helper function that returns JSX. This keeps your render method readable and makes each branch independently testable, especially when you have more than two possible states.

Can I use an if statement directly inside JSX?

No, if statements are not expressions and can't appear inside JSX curly braces. Move the conditional logic above the return statement or wrap it in an immediately invoked function expression, though the former is almost always cleaner.

What is the best way to conditionally apply a CSS class in React?

Use a ternary expression in the className prop: className={isActive ? 'active' : 'inactive'}. For multiple conditional classes, the classnames or clsx library keeps the logic readable without manual string concatenation.

Build / Code / React

React Conditional Rendering

Show or hide elements in React using if statements, ternaries, logical operators, and switch patterns.

TL;DR

Use if statements to return different JSX based on conditions.
Use ternary expressions inside JSX for inline conditionals.
Use logical AND for simple show-or-hide patterns.

Jump to section

If Statements
Ternary Operator
Logical AND Operator
Switch Patterns
Conditional Components

If Statements

Return different JSX based on a condition before the return statement.

function UserInfo({ user }) {
  if (!user) return <p>Loading...</p>;
  return <div>{user.name}</div>;
}

This is the clearest pattern when conditions are complex.
Use early returns to handle edge cases at the top of the component.
Combine multiple if statements for sequential checks.
Avoid nesting too many ifs — extract sub-components instead.

Ternary Operator

Use the ternary operator inside JSX for inline conditionals.
```
<div>{user ? user.name : "Guest"}</div>
```
Read as "if user is truthy, show user.name, else show Guest".
Keep ternaries simple and readable — use if statements for complex logic.

Nest ternaries only for quick reads, not for multiple conditions.

<div>{user ? (user.isAdmin ? "Admin" : "User") : "Guest"}</div>

Extract nested ternaries into separate components for clarity.

Logical AND Operator

Use && to render JSX only when a condition is true.
```
<div>{user && <p>Hello, {user.name}!</p>}</div>
```
This hides the element when the condition is false without rendering anything.
Only use when there is no "else" case needed — otherwise use ternary.
Beware of falsy values — avoid using && with 0 or empty strings.
```
{count > 0 && <p>{count} items</p>}
```
Use ternary instead if you need to show something when the condition is false.

Switch Patterns

Use a switch statement before the return for multiple conditions.

function Status({ status }) {
  switch (status) {
    case "loading":
      return <p>Loading...</p>;
    case "success":
      return <p>Done!</p>;
    case "error":
      return <p>Error occurred</p>;
    default:
      return null;
  }
}

Switch works well when you have many distinct states to handle.
Always include a default case for unexpected values.
Extract each case into a separate component for reusability.

Conditional Components

Create helper components to encapsulate conditional rendering logic.

function IfAdmin({ children, user }) {
  return user?.isAdmin ? children : null;
}
<IfAdmin user={user}>
  <AdminPanel />
</IfAdmin>

Use render props or children to control what is displayed.
Name components clearly to show their conditional purpose.
This pattern keeps components focused and testable.
Combine with custom hooks for more complex conditional logic.

Tips

Prefer if statements and switch for clarity, since they separate logic from JSX and are easier to test and refactor.

Warnings

Avoid using <code>&&</code> with falsy values like <code>0</code> or empty strings, since they will render nothing instead of the string itself.