Feed Reader BotФотография
DEV Community: react React Mastery Series – Day 10: Conditional Rendering in React – Building Dynamic User Interfaces
Welcome back to the React Mastery Series!
In the previous article, we explored Event Handling in React and learned how applications respond to user interactions such as clicks, typing, and form submissions.
Today, we will learn another core React concept that is used in almost every real-world application: Conditional Rendering Modern applications rarely display the same UI to every user.
A banking application may show:
* Login page for unauthenticated users
* Dashboard for logged-in users
* Admin features for administrators
* Different screens based on account status
An e-commerce application may show:
* Products when data exists
* Loading indicators while fetching data
* Error messages when API calls fail
* Empty states when no results are found
React handles these scenarios using conditional rendering. What is Conditional Rendering? Conditional rendering means displaying different UI elements based on certain conditions.
The concept is simple: Condition is true
|
↓
Render UI A
Condition is false
|
↓
Render UI B In React, conditions are written using normal JavaScript. Conditional Rendering Using if/else The simplest approach is using JavaScript if/else.
Example: function LoginStatus() { const isLoggedIn = true; if (isLoggedIn) { return h1>Welcome Back!h1>; } return h1>Please Loginh1>; } If: isLoggedIn = true; Output: Welcome Back! If: isLoggedIn = false; Output: Please Login The JSX returned by the component is converted by React into actual DOM elements during rendering. Conditional Rendering Using Variables Sometimes, conditions can become more readable by storing the UI in a variable.
Example: function Dashboard() { const isAdmin = true; let content; if (isAdmin) { content = AdminPanel />; } else { content = UserPanel />; } return ( div> {content} div> ); } This approach is useful when the UI logic becomes more complex. Conditional Rendering Using Ternary Operator The ternary operator is one of the most commonly used patterns in React.
Syntax: condition ? trueValue : falseValue Example: function Profile() { const isLoggedIn = true; return ( h2> { isLoggedIn ? "My Profile" : "Login" } h2> ); } Output: My Profile Real-World Example: Authentication Most enterprise applications have authentication-based rendering.
Example: function Header() { return ( header> { isAuthenticated ? UserMenu /> : LoginButton /> } header> ); } Flow: User Logged In
|
↓
Show Profile Menu
User Logged Out
|
↓
Show Login Button Logical AND (&&) Rendering When you want to render something only when a condition is true, use the logical AND operator.
Example: function Notifications() { const hasNotifications = true; return ( div> { hasNotifications && NotificationList /> } div> ); } Meaning: Condition is true
|
↓
Render Component
Condition is false
|
↓
Render Nothing Handling Loading States API-driven applications usually have multiple states: Loading
|
↓
Success
|
↓
Display Data Example: function Users() { if (isLoading) { return h2>Loading...h2>; } return UserList />; } This pattern is common in:
* Dashboards
* Banking applications
* E-commerce websites
* Admin portals Rendering Error Messages Applications must handle failures gracefully.
Example: function PaymentStatus() { return ( div> { error ? p>Payment Failedp> : p>Payment Successfulp> }[...]