React · Describing the UI

Conditional Rendering

Master the art of showing and hiding UI elements based on conditions. Learn if statements, ternary operators, and the && operator!

Find videos you like?

Save to resource drawer for future reference!

What is Conditional Rendering?

The power to show different UI based on conditions - like an if statement for your interface!

Conditional rendering is React's way of letting your components make decisions. Just like you use if statements in JavaScript to control program flow, you use conditional rendering to control what users see. Show a loading spinner while data loads, display different content for logged-in vs guest users, or hide features based on user permissions!

How Conditional Rendering Works

Check Condition

Is user logged in?

↓

React Decides

Evaluates condition

↓

✓

True

Show Dashboard

✗

False

Show Login

Real-World Examples

🎬 Netflix: Shows your profile if logged in, login screen if not
🛒 Amazon: Shows "Add to Cart" for items, "Out of Stock" for unavailable
📱 Instagram: Shows "Follow" button for strangers, "Following" for people you follow

If Statements - The Foundation

The most powerful and flexible way to handle conditional rendering!

If statements are your go-to tool for conditional rendering. They're perfect when you need complex logic, multiple conditions, or when you want to return completely different components. Think of them as the traditional JavaScript if-else but for your UI!

If Statement Syntax

Basic Structure:

function Component({ condition }) {

if (condition) {

return <TrueComponent />;

}

return <FalseComponent />;

}

Real Example:

function UserGreeting({ user }) {

if (user) {

return <Welcome name={user.name} />;

}

return <LoginButton />;

}

Ternary Operator - The Quick Choice

A compact, inline way to choose between two options!

The ternary operator is your best friend for simple if-else decisions right inside your JSX. It's like a mini if-else statement that fits on one line: condition ? valueIfTrue : valueIfFalse. Perfect for choosing between two components, styles, or text values!

If Statement vs Ternary

If Statement:

if (isLoading) {
return <Spinner />;
}
return <Content />;

Ternary Operator:

{isLoading ? <Spinner /> : <Content />}

Common Use Cases

▸Choosing between two components

▸Setting CSS classes conditionally

▸Displaying different text

▸Toggling boolean values

Logical AND (&&) - The Show/Hide Expert

Show something only when a condition is true - perfect for optional content!

The && operator is your secret weapon for showing content only when you need it. Unlike the ternary operator, it doesn't need an "else" case - if the condition is false, it shows nothing! Perfect for notification badges, loading states, error messages, and optional UI elements.

Why && is Better for Show/Hide

Using Ternary (Longer):

{isLoading ? (

) : null}

// Have to specify null

Using && (Cleaner):

{isLoading && (

)}

// Automatically shows nothing

⚠️ Important: Numbers with &&

Never use {count && <Badge /> if count can be 0! React will display "0" instead of nothing.
Always use {count > 0 && <Badge /> for numbers to avoid this issue.

Dynamic CSS & Styling

Master conditional styling to make your UI responsive and interactive!

Dynamic styling lets you change how elements look based on state, props, or user interactions. Combine conditional rendering with dynamic classes and inline styles to create responsive, interactive interfaces that adapt to different conditions!

🎨 Dynamic CSS Classes

Template Literals Method:

className={`base-class ${isActive ? `active` : `inactive`}`}

// Clean and readable

Conditional Join Method:

className={[`base-class`, isActive && `active`].filter(Boolean).join(` `)}

// Handles multiple conditions

🎯 Dynamic Inline Styles

Ternary Style Object:

style={{

color: isError ? `red` : `green`,

fontWeight: isActive ? `bold` : `normal`

}}

Spread Operator Method:

style={{

...baseStyles,

...(isActive && activeStyles),

...(isError && errorStyles)

}}

✅ Best Practices

▸Use template literals for simple class combinations
▸Use filter().join() for multiple conditional classes
▸Use spread operator for complex style combinations
▸Extract style objects outside render when possible
▸Prefer CSS classes over inline styles for performance

⚡ Performance Tips

▸Avoid creating new objects on every render when possible
▸Use useMemo for expensive style calculations
▸CSS-in-JS libraries handle optimization automatically
▸Consider CSS custom properties for dynamic values
▸Test performance with React DevTools Profiler

Best Practices & Common Pitfalls

Write clean, readable conditional rendering code like a pro!

✅ Do This

•Use if statements for complex logic or multiple conditions
•Use ternary for simple if-else choices between two options
•Use && when you only need to show something (no else needed)
•Always use condition > 0 with numbers and && operator
•Extract complex conditions to variables for readability
•Return null to hide entire components completely

❌ Avoid This

•Don't use {count && <Badge /> - React will show "0"!
•Don't nest ternaries deeply - becomes unreadable
•Don't put complex logic directly in JSX conditions
•Don't use if-else in JSX - it won't compile!
•Don't render undefined/false - can cause warnings
•Don't over-optimize - readability is more important

Quick Reference Guide

Choose the perfect conditional rendering technique for your needs!

If Statement

if (condition) {

return <A />;

}

return <B />;

✅ Best for: Complex logic, multiple conditions, early returns

Ternary Operator

{condition ? <A /> : <B />

✅ Best for: Inline if-else, choosing between two options

Logical AND

{condition && <A />

✅ Best for: Show something only if true, nothing otherwise

∅

Return Null

if (!condition) return null;

✅ Best for: Hiding entire components completely

🤔 Which Should I Use?

Q:Do you need complex logic or multiple conditions?

A:Use if statements - they're the most flexible

Q:Are you choosing between exactly two options?

A:Use ternary operator - clean and concise

Q:Do you only want to show something when true?

A:Use && operator - perfect for show/hide

Q:Do you want to hide an entire component?

A:Use return null - completely removes it

Previous Topic

Components & Props

Deep dive into components, props, prop types, default props, and how data flows between components.

Next Topic

Rendering Lists

Render dynamic lists with map(), understand keys, filtering, sorting, and list performance optimization.

Ask a Question

Have a question about Conditional Rendering? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Describing the UI

Conditional Rendering

Master the art of showing and hiding UI elements based on conditions. Learn if statements, ternary operators, and the && operator!

Find videos you like?

Save to resource drawer for future reference!

What is Conditional Rendering?

The power to show different UI based on conditions - like an if statement for your interface!

How Conditional Rendering Works

Check Condition

Is user logged in?

↓

React Decides

Evaluates condition

↓

✓

True

Show Dashboard

✗

False

Show Login

Real-World Examples

If Statements - The Foundation

The most powerful and flexible way to handle conditional rendering!

If Statement Syntax

Basic Structure:

function Component({ condition }) {

if (condition) {

return <TrueComponent />;

}

return <FalseComponent />;

}

Real Example:

function UserGreeting({ user }) {

if (user) {

return <Welcome name={user.name} />;

}

return <LoginButton />;

}

Ternary Operator - The Quick Choice

A compact, inline way to choose between two options!

If Statement vs Ternary

If Statement:

if (isLoading) {
return <Spinner />;
}
return <Content />;

Ternary Operator:

{isLoading ? <Spinner /> : <Content />}

Common Use Cases

▸Choosing between two components

▸Setting CSS classes conditionally

▸Displaying different text

▸Toggling boolean values

Logical AND (&&) - The Show/Hide Expert

Show something only when a condition is true - perfect for optional content!

Why && is Better for Show/Hide

Using Ternary (Longer):

{isLoading ? (

) : null}

// Have to specify null

Using && (Cleaner):

{isLoading && (

)}

// Automatically shows nothing

⚠️ Important: Numbers with &&

Never use {count && <Badge /> if count can be 0! React will display "0" instead of nothing.
Always use {count > 0 && <Badge /> for numbers to avoid this issue.

Dynamic CSS & Styling

Master conditional styling to make your UI responsive and interactive!

🎨 Dynamic CSS Classes

Template Literals Method:

className={`base-class ${isActive ? `active` : `inactive`}`}

// Clean and readable

Conditional Join Method:

className={[`base-class`, isActive && `active`].filter(Boolean).join(` `)}

// Handles multiple conditions

🎯 Dynamic Inline Styles

Ternary Style Object:

style={{

color: isError ? `red` : `green`,

fontWeight: isActive ? `bold` : `normal`

}}

Spread Operator Method:

style={{

...baseStyles,

...(isActive && activeStyles),

...(isError && errorStyles)

}}

✅ Best Practices

▸Use template literals for simple class combinations
▸Use filter().join() for multiple conditional classes
▸Use spread operator for complex style combinations
▸Extract style objects outside render when possible
▸Prefer CSS classes over inline styles for performance

⚡ Performance Tips

▸Avoid creating new objects on every render when possible
▸Use useMemo for expensive style calculations
▸CSS-in-JS libraries handle optimization automatically
▸Consider CSS custom properties for dynamic values
▸Test performance with React DevTools Profiler

Best Practices & Common Pitfalls

Write clean, readable conditional rendering code like a pro!

✅ Do This

•Use if statements for complex logic or multiple conditions
•Use ternary for simple if-else choices between two options
•Use && when you only need to show something (no else needed)
•Always use condition > 0 with numbers and && operator
•Extract complex conditions to variables for readability
•Return null to hide entire components completely

❌ Avoid This

•Don't use {count && <Badge /> - React will show "0"!
•Don't nest ternaries deeply - becomes unreadable
•Don't put complex logic directly in JSX conditions
•Don't use if-else in JSX - it won't compile!
•Don't render undefined/false - can cause warnings
•Don't over-optimize - readability is more important

Quick Reference Guide

Choose the perfect conditional rendering technique for your needs!

If Statement

if (condition) {

return <A />;

}

return <B />;

✅ Best for: Complex logic, multiple conditions, early returns

Ternary Operator

{condition ? <A /> : <B />

✅ Best for: Inline if-else, choosing between two options

Logical AND

{condition && <A />

✅ Best for: Show something only if true, nothing otherwise

∅

Return Null

if (!condition) return null;

✅ Best for: Hiding entire components completely

🤔 Which Should I Use?

Q:Do you need complex logic or multiple conditions?

A:Use if statements - they're the most flexible

Q:Are you choosing between exactly two options?

A:Use ternary operator - clean and concise

Q:Do you only want to show something when true?

A:Use && operator - perfect for show/hide

Q:Do you want to hide an entire component?

A:Use return null - completely removes it

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Components & Props

Rendering Lists

Building Your Learning Module...

Conditional Rendering

How Conditional Rendering Works

Real-World Examples

If Statement Syntax

If Statement vs Ternary

Common Use Cases

Why && is Better for Show/Hide

⚠️ Important: Numbers with &&

🎨 Dynamic CSS Classes

🎯 Dynamic Inline Styles

✅ Best Practices

⚡ Performance Tips

Best Practices & Common Pitfalls

✅ Do This

❌ Avoid This

If Statement

Ternary Operator

Logical AND

Return Null

🤔 Which Should I Use?

Components & Props

Rendering Lists

Conditional Rendering

How Conditional Rendering Works

Real-World Examples

If Statement Syntax

If Statement vs Ternary

Common Use Cases

Why && is Better for Show/Hide

⚠️ Important: Numbers with &&

🎨 Dynamic CSS Classes

🎯 Dynamic Inline Styles

✅ Best Practices

⚡ Performance Tips

Best Practices & Common Pitfalls

✅ Do This

❌ Avoid This

If Statement

Ternary Operator

Logical AND

Return Null

🤔 Which Should I Use?