Category: react
Conditional rendering in react
Published on 14 Feb 2026
Explanation
Conditional rendering means,
displaying different UI elements
based on certain conditions
Using if Statement
Best for Multiple Conditions
Code:
function LoginStatus() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
if (isLoggedIn) {
return (
<div>
<h2>Welcome Back!</h2>
<button onClick={() => setIsLoggedIn(false)}>Logout</button>
</div>
);
}
Explanation
cont..
Code:
return (
<div>
<h2>Please Login</h2>
<button onClick={() => setIsLoggedIn(true)}>
Login</button>
</div>
);
}
export default LoginStatus;
Explanation
Ternary Operator
condition ? true : false
Code:
function UserGreeting({ isLoggedIn }) {
return (
<div>
{
isLoggedIn ?
<h1>Welcome User!</h1>
:
<h1>Please Sign Up</h1>
}
</div>
);
}
Explanation
Logical AND (&&) Operator
If message is null/undefined/false → nothing renders
Code:
function Notification({ message
}) {
return (
<div>
{message && <p>You have a new message:
{message}</p>}
</div>
);
}
Explanation
Using switch Statement
Good for multiple cases.
Code:
switch (status) {
case "loading":
return <h2>Loading...</h2>;
case "success":
return <h2>Data Load Successfully!</h2>;
case "error":
return <h2>Error!</h2>;
default:
return null;
}
Explanation
Conditional Rendering with
Variables
Code:
function Dashboard({ role }) {
let content;
if (role === "admin") {
content = <h2>Admin Panel</h2>;
} else {
content = <h2>User Dashboard</h2>;
}
return <div>{content}</div>;
}
Explanation
Rendering Nothing (Return null)
If you don’t want to render anything:
Code:
function Warning({ show }) {
if (!show) return null;
return <h3>Warning: Something went wrong!</h3>;
}
Explanation
Conditional CSS Classes
Code:
function Button({ isActive }) {
return (
<button
className={isActive ? "btn active" : "btn"}>
Click Me
</button>
);
}
Explanation
Conditional Rendering in Lists
Code:
function ItemList({ items }) {
return (
<ul>
{items.length === 0 ? (
<p>No items available</p>
) : (
items.map((item, index) => (
<li key={index}>{item}</li>
))
)}
</ul>
);
}