Conditional Rendering with If-Else and Ternary Operators0%
Logical AND Operator for Inline Rendering

Conditional Rendering with If-Else and Ternary Operators

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Conditional Rendering with If-Else and Ternary Operators

1. What is Conditional Rendering?

In real-world web applications, user interfaces frequently need to display different components or markup depending on specific conditions:

  • Showing a "Login" button for guests vs a "Profile" dropdown for authenticated users
  • Showing a spinner while data is loading vs the actual data when loaded
  • Showing an error banner when a form submission fails
  • Showing an empty state when a shopping cart has 0 items

In React, conditional rendering works the exact same way conditions work in JavaScript: using standard JavaScript control flow structures such as if/else statements, ternary operators (? :), and logical operators.

2. Method 1: Early Return with if/else

When a condition dictates that a completely different view should be rendered, using standard if statements with early returns is clean and readable:

JSX
import React from 'react';
 
export default function UserDashboard({ user, isLoading, error }) {
// 1. Loading state early return
if (isLoading) {
return <div className="spinner">Loading your dashboard...</div>;
}
 
// 2. Error state early return
if (error) {
return <div className="error-alert">Error: {error.message}</div>;
}
 
// 3. Unauthenticated state early return
if (!user) {
return (
<div className="guest-view">
<h2>Please Sign In</h2>
<button>Login to Continue</button>
</div>
);
}
 
// 4. Primary view (all checks passed)
return (
<div className="dashboard-view">
<h2>Welcome back, {user.name}!</h2>
<p>Enrolled Courses: {user.enrolledCount}</p>
</div>
);
}

Note: Make sure any React Hooks (like useState or useEffect) are declared before any early returns to obey the Rules of Hooks!

3. Method 2: The Ternary Operator (condition ? trueVal : falseVal)

Because if statements are statements (not expressions), they cannot be used directly inside JSX markup. When you want to conditionally render one of two elements inline, the ternary operator is the tool of choice:

JSX
import React, { useState } from 'react';
 
export default function MembershipCard({ isProMember }) {
return (
<div className="card">
<h3>MSK Learning Portal</h3>
{/* Inline ternary conditional rendering */}
{isProMember ? (
<div className="pro-badge">
<span className="star">★</span>
<span>Pro Subscriber: Unlimited Lab Access</span>
</div>
) : (
<div className="free-tier">
<span>Standard Member: 3 Free Lessons Remaining</span>
<button className="upgrade-btn">Upgrade to Pro</button>
</div>
)}
</div>
);
}

4. Conditional Attribute and Class Assignment

Ternary operators are also invaluable for conditionally applying classes, styles, and attribute values:

JSX
<button
className={`btn ${isActive ? 'btn-primary' : 'btn-outline'}`}
disabled={isLoading}
aria-expanded={isOpen ? 'true' : 'false'}
>
{isLoading ? 'Saving...' : 'Save Changes'}
</button>
Interactive Quiz

Practice Quiz

Question 1
Why can't you place an if statement directly inside JSX curly braces {}?
Question 2
What is the primary advantage of using early return statements for conditional rendering?
Question 3
What rule must be respected when combining React Hooks with early returns?
Question 4
Which operator is used for inline conditional rendering when you want to choose between two alternate elements?
Question 5
What is rendered if a ternary condition evaluates to condition ? null : <Button /> and the condition is true?
Next Lesson

Logical AND Operator for Inline Rendering

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Filtering and Sorting List Data DynamicallyLogical AND Operator for Inline Rendering

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext