Conditional Rendering in React – Showing Dynamic UI
A real application rarely shows exactly the same UI all the time.
Think about a social media application.
If you're logged in:
Welcome back, Saurabh 👋
[ Profile ] [ Logout ]
If you're logged out:
Welcome!
[ Login ] [ Sign Up ]
The application is making a decision about what to display.
This is called Conditional Rendering.
Today we'll learn how React uses JavaScript conditions to dynamically decide what should appear on the screen.
🧠 What Is Conditional Rendering?
Conditional rendering means:
Rendering different UI depending on whether a condition is true or false.
For example:
function App() {
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? <h1>Welcome!</h1> : <h1>Please Login</h1>}
</div>
);
}
If:
isLoggedIn === true
React renders:
Welcome!
Otherwise:
Please Login
⚛️ Why Is Conditional Rendering Important?
Conditional rendering is everywhere in modern applications.
For example:
Authentication
Logged in → Dashboard
Logged out → Login
Loading
Loading → Spinner
Loaded → Content
Errors
Error → Error message
No error → Data
Permissions
Admin → Admin Panel
User → User Dashboard
Empty states
Cart has products → Cart items
Cart is empty → "Your cart is empty"
Conditional rendering allows one component to adapt to different situations.
🔀 Using the Ternary Operator
One of the most common ways to conditionally render UI is the ternary operator.
Syntax:
condition ? valueIfTrue : valueIfFalse
Example:
const isLoggedIn = true;
return (
<h1>
{isLoggedIn ? "Welcome Back!" : "Please Login"}
</h1>
);
The condition:
isLoggedIn
is checked.
If it's true:
Welcome Back!
If it's false:
Please Login
🧩 Conditional Components
We can use the ternary operator to render entire components.
function App() {
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? <Dashboard /> : <Login />}
</div>
);
}
This is much more powerful than simply changing text.
The UI itself changes.
👤 Example: Login / Logout
Let's create a simple authentication UI.
import { useState } from "react";
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div>
{isLoggedIn ? (
<>
<h1>Welcome Back! 👋</h1>
<button onClick={() => setIsLoggedIn(false)}>
Logout
</button>
</>
) : (
<>
<h1>Please Login</h1>
<button onClick={() => setIsLoggedIn(true)}>
Login
</button>
</>
)}
</div>
);
}
export default App;
Now our UI changes based on state.
The flow is:
User clicks Login
↓
setIsLoggedIn(true)
↓
State changes
↓
Component re-renders
↓
Dashboard UI appears
This connects everything we've learned so far:
State + Events + Conditional Rendering
⚡ Logical AND &&
Sometimes we don't need an else.
We only want to display something when a condition is true.
For example:
const isAdmin = true;
return (
<div>
{isAdmin && <button>Admin Panel</button>}
</div>
);
If:
isAdmin === true
the button appears.
If:
isAdmin === false
nothing is rendered.
🧠 Understanding &&
The JavaScript expression:
true && "Hello"
returns:
Hello
But:
false && "Hello"
returns:
false
React doesn't render the boolean false as visible UI.
That's why this works:
{isLoggedIn && <Dashboard />}
⚠️ Be Careful With 0 &&
There's an important JavaScript gotcha.
Consider:
const count = 0;
return (
<div>
{count && <p>Items available</p>}
</div>
);
You might expect nothing.
But count is:
0
and React can render that 0.
You may end up seeing:
0
A safer condition can be:
{count > 0 && <p>Items available</p>}
This is an important detail when working with numeric values.
🔄 Using if Statements
Not every condition should be written inside JSX.
Sometimes a normal if statement is cleaner.
For example:
function Greeting({ isLoggedIn }) {
if (isLoggedIn) {
return <h1>Welcome Back!</h1>;
}
return <h1>Please Login</h1>;
}
This is very readable.
🧠 Early Return
We can use an early return to handle a specific condition.
function Dashboard({ isLoggedIn }) {
if (!isLoggedIn) {
return <h2>Please login first.</h2>;
}
return <h1>Dashboard</h1>;
}
The logic becomes:
Not logged in?
↓
Show login message
↓
Stop
Logged in?
↓
Show dashboard
Early returns are particularly useful when a component has multiple states.
⏳ Loading States
Conditional rendering is extremely useful when fetching data.
For example:
function UserProfile({ loading }) {
if (loading) {
return <p>Loading...</p>;
}
return <h1>User Profile</h1>;
}
The UI can have different states:
Loading
↓
Success
↓
Display Data
Or:
Loading
↓
Error
We'll use this heavily when we start working with APIs.
❌ Error States
Suppose:
function UserData({ error }) {
if (error) {
return <p>Something went wrong. ❌</p>;
}
return <p>User loaded successfully! ✅</p>;
}
Now our UI responds to errors.
A mature application usually has at least these states:
Loading
Success
Error
Empty
Thinking in terms of these states is extremely useful when building real applications.
📭 Empty States
Suppose we have a list:
const tasks = [];
We can display:
{tasks.length === 0 ? (
<p>No tasks available.</p>
) : (
<TaskList tasks={tasks} />
)}
If the array is empty:
No tasks available.
Otherwise:
Task List
This is called an empty state.
🔢 Conditional Rendering Based on Numbers
We can use normal comparisons.
const age = 23;
return (
<div>
{age >= 18 ? (
<p>You are an adult.</p>
) : (
<p>You are a minor.</p>
)}
</div>
);
JavaScript conditions work naturally inside React.
For example:
age > 18
age === 18
age !== 18
items.length > 0
🎨 Dynamic Styling With Conditions
Conditional rendering isn't limited to elements.
We can also change classes.
function Button({ active }) {
return (
<button className={active ? "active" : "inactive"}>
Button
</button>
);
}
If:
active === true
the class becomes:
active
Otherwise:
inactive
This is useful for:
Active navigation links
Selected buttons
Tabs
Dark mode
Validation states
🌙 Example: Dark Mode
Let's combine State + Events + Conditional UI.
import { useState } from "react";
function App() {
const [darkMode, setDarkMode] = useState(false);
return (
<div className={darkMode ? "dark" : "light"}>
<h1>
{darkMode ? "Dark Mode 🌙" : "Light Mode ☀️"}
</h1>
<button onClick={() => setDarkMode(prev => !prev)}>
Toggle Theme
</button>
</div>
);
}
export default App;
The state:
darkMode
controls the UI.
The event:
onClick
changes the state.
The conditional:
darkMode ? "dark" : "light"
changes the appearance.
🧩 Multiple Conditions
Sometimes there are more than two possible states.
For example:
Admin
User
Guest
We could use:
function Dashboard({ role }) {
if (role === "admin") {
return <AdminDashboard />;
}
if (role === "user") {
return <UserDashboard />;
}
return <GuestDashboard />;
}
This is often easier to read than deeply nested ternaries.
⚠️ Avoid Nested Ternaries
This works:
condition
? <A />
: otherCondition
? <B />
: <C />
But once conditions become complex, readability suffers.
Prefer:
if (condition) {
return <A />;
}
if (otherCondition) {
return <B />;
}
return <C />;
Simple code is usually easier to maintain.
🧠 Conditional Rendering With Functions
We can move complicated logic outside JSX.
function getMessage(isLoggedIn, isAdmin) {
if (!isLoggedIn) {
return "Please login";
}
if (isAdmin) {
return "Welcome Admin";
}
return "Welcome User";
}
Then:
<h1>{getMessage(isLoggedIn, isAdmin)}</h1>
This keeps JSX cleaner.
🔥 Real-World Example: Product Availability
Imagine an e-commerce product.
function Product({ stock }) {
return (
<div>
<h2>Mechanical Keyboard</h2>
{stock > 0 ? (
<button>Add to Cart</button>
) : (
<p>Out of Stock ❌</p>
)}
</div>
);
}
Now:
stock = 10
shows:
[ Add to Cart ]
while:
stock = 0
shows:
Out of Stock ❌
This is exactly how real applications make decisions based on data.
🔄 Combining State, Events & Conditions
Let's build a small notification example.
import { useState } from "react";
function App() {
const [showMessage, setShowMessage] = useState(false);
return (
<div>
<button
onClick={() => setShowMessage(prev => !prev)}
>
{showMessage ? "Hide Message" : "Show Message"}
</button>
{showMessage && (
<p>Hello! This message is visible. 👋</p>
)}
</div>
);
}
Here:
State
showMessage
Event
onClick
Conditional rendering
showMessage && <p>...</p>
Dynamic button text
showMessage
? "Hide Message"
: "Show Message"
This is the kind of pattern you'll use constantly in React.
🧠 React Doesn't Have Its Own Conditional Syntax
One thing I found important today:
React doesn't create a completely new programming language for conditions.
We're still using JavaScript.
We use:
if
else
?
:
&&
!
===
>
<
inside React components.
For example:
{isLoggedIn ? <Dashboard /> : <Login />}
The JSX simply allows JavaScript expressions to control what gets rendered.
🏆 Best Practices
1. Keep conditions readable
Prefer:
{isLoggedIn ? <Dashboard /> : <Login />}
over unnecessarily complicated expressions.
2. Use && when there is only a true case
{isAdmin && <AdminPanel />}
3. Use if for complex logic
if (!user) {
return <Login />;
}
4. Avoid deeply nested ternaries
They become difficult to understand.
5. Think in UI states
When designing a component, ask:
What does the user see when:
- Loading?
- Successful?
- Empty?
- Error?
- Logged out?
This mindset helps create better applications.
6. Keep JSX clean
Move complicated calculations or decisions into variables/functions when necessary.
For example:
const message = isLoggedIn
? "Welcome Back!"
: "Please Login";
Then:
<h1>{message}</h1>
🚀 Complete Example: User Dashboard
Let's combine today's concepts.
import { useState } from "react";
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [isAdmin, setIsAdmin] = useState(false);
if (!isLoggedIn) {
return (
<div>
<h1>Welcome 👋</h1>
<button onClick={() => setIsLoggedIn(true)}>
Login
</button>
</div>
);
}
return (
<div>
<h1>Dashboard</h1>
{isAdmin && (
<button>
Admin Panel
</button>
)}
<button onClick={() => setIsLoggedIn(false)}>
Logout
</button>
</div>
);
}
export default App;
This small example already demonstrates:
State
Events
if&&Conditional components
Login/logout
Role-based UI
💡 My Biggest Takeaway
Today's biggest takeaway is:
React UI is a function of state and data.
When state changes, the conditions may change.
When the conditions change, the UI can change.
For example:
isLoggedIn = false
↓
<Login />
Then:
isLoggedIn = true
↓
<Dashboard />
This is one of the most important mental models for React.
Instead of manually telling the browser:
"Hide this element."
We describe:
"If this condition is true, this is what the UI should look like."
React handles the rendering.
🚀 Final Summary
Today I learned:
What conditional rendering is
Ternary operator
&&conditional renderingifstatementsEarly returns
Loading states
Error states
Empty states
Conditional styling
Multiple conditions
Dynamic UI
State + Events + Conditions
Why nested ternaries can be problematic
How JavaScript controls JSX
The progression is becoming clearer:
Day 62
Props
↓
Day 63
State
↓
Day 64
Events
↓
Day 65
Conditional Rendering
↓
Interactive React UI