Day 6: Conditional Rendering in React.js
Our today’s learning is Conditional Rendering in React.js. When you build apps, you don’t always want to show everything at once. Sometimes you show a message only if the user is logged in, or display a loading spinner until data arrives. This is where conditional rendering comes in.
What is Conditional Rendering?
Conditional rendering means:
👉 Show a UI element only if a certain condition is true.
In React, this works just like JavaScript conditions (if, ? :, &&).
Example 1: Simple if Condition
import React, { useState } from "react";
export default function LoginCheck() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div className="text-center mt-10">
{isLoggedIn ? (
<h2 className="text-green-600">Welcome Back! 🎉</h2>
) : (
<h2 className="text-red-600">Please Log In</h2>
)}
<button
className="mt-4 px-4 py-2 bg-blue-600 text-white rounded"
onClick={() => setIsLoggedIn(!isLoggedIn)}
>
{isLoggedIn ? "Logout" : "Login"}
</button>
</div>
);
}👉 Here state setup:
const [isLoggedIn, setIsLoggedIn] = useState(false);isLoggedIn→ a piece of state that tracks if the user is logged in (trueorfalse).setIsLoggedIn→ function used to change that state.- Initially,
isLoggedInisfalse(user is not logged in).
Conditional Rendering (the ternary ? :)
{isLoggedIn ? (
<h2 className="text-green-600">Welcome Back! 🎉</h2>
) : (
<h2 className="text-red-600">Please Log In</h2>
)}- If
isLoggedIn === true→ show “Welcome Back!” in green. - Else (
isLoggedIn === false) → show “Please Log In” in red.
Button that toggles the state
setIsLoggedIn(!isLoggedIn)} > {isLoggedIn ? "Logout" : "Login"}When clicked, it flips the value of isLoggedIn (true → false or false → true).
The button text also changes:
- If logged in → button shows “Logout”.
- If not logged in → button shows “Login”.
Example 2: Using && (Short-Circuit Rendering)
import React, { useState } from "react";
export default function Notifications() {
const [hasNotifications, setHasNotifications] = useState(true);
return (
<div className="text-center mt-10">
<h2 className="text-xl">Dashboard</h2>
{hasNotifications && <p className="text-blue-600">You have new messages 📩</p>}
<button
className="mt-4 px-4 py-2 bg-gray-700 text-white rounded"
onClick={() => setHasNotifications(!hasNotifications)}
>
Toggle Notifications
</button>
</div>
);
}Here, conditional rendering is done using &&. The expression means: only show the second part if the condition is true. So, when hasNotifications is true, the blue message appears. If false, nothing is displayed. The button flips hasNotifications between true and false, allowing you to easily toggle the notification text on and off.
Example 3: Loading State (Practical Use)
In this practical example, We will create Component in React.js for Loading which can be used when we need to show users that something is being fetched, processed, or prepared.
import React, { useState, useEffect } from "react";
export default function DataLoader() {
const [loading, setLoading] = useState(true);
const [data, setData] = useState(null);
useEffect(() => {
// Simulate API call
setTimeout(() => {
setData("Here is your data!");
setLoading(false);
}, 2000);
}, []);
return (
<div className="text-center mt-10">
{loading ? <p className="text-gray-500">Loading...</p> : <p>{data}</p>}
</div>
);
}👉 Here:
- While loading =
true, it shows “Loading…” - Once data arrives, it shows the actual content
Key Takeaways
- Conditional rendering = show elements only if conditions are met.
- Use
? :for if-else, and&&for quick checks. - Very useful for login/logout states, loading spinners, notifications, dashboards, etc.
👉 Up Next (Day 7): We’ll explore Virtual DOM in React—the secret behind why React updates UI so efficiently.
