⚛️ Conditional Components

? Quick Overview

In React, conditional components are small, reusable components that render different UI based on props or logic. Instead of putting many if or ternary expressions directly inside a big component, you extract those conditions into focused child components.

This approach improves readability, maintainability, and separation of concerns, making your UI logic easier to understand and test.

✨ Idea: Turn conditions into components!

? Key Concepts

• Conditional Component: A component whose rendering depends on props or state.
• Separation of Concerns: Each condition gets its own component (e.g., LoggedIn, LoggedOut).
• Parent Chooser: A parent component decides which child component to render.
• Role / Permission Based UI: Different components for admins, users, guests, etc.
• Wrapper / Guard Components: Components like Protected decide whether to render children.
• Prop-Driven Styling: Components like Alert change style based on props.

? Syntax & Theory

A typical pattern for conditional components is:

1. Create small components for each visual state (e.g., success, error, empty).
2. Use a parent component to decide which one to render based on props or state.
3. Optionally, create wrapper components that guard content (authentication, permissions, feature flags).

Conceptually:

// Pattern: parent chooses which conditional component to render
function StateA() {
return <p>State A UI</p>;
}

function StateB() {
return <p>State B UI</p>;
}

function Parent({ condition }) {
return condition ? <StateA /> : <StateB />;
}

? Example: Login Flow Components

Here, we create two small components for different user states and let the parent component decide which one to render:

// Renders different messages depending on whether the user is logged in
function LoggedIn() {
return <h4 className="text-success">Welcome back, user! ?</h4>;
}

function LoggedOut() {
return <h4 className="text-danger">Please log in to continue.</h4>;
}

function LoginControl({ isLoggedIn }) {
return isLoggedIn ? <LoggedIn /> : <LoggedOut />;
}

? Example: Role-Based Components

Conditional components are ideal for handling role-based or permission-based rendering:

// Shows a different dashboard depending on the user's role
function AdminPanel() {
return <div className="border p-3">Admin Dashboard ?️</div>;
}

function UserPanel() {
return <div className="border p-3">User Dashboard ?</div>;
}

function Dashboard({ role }) {
switch (role) {
case "admin":
return <AdminPanel />;
case "user":
return <UserPanel />;
default:
return <p>Access Denied ❌</p>;
}
}

?️ Example: Conditional Wrapper (Protected)

You can also create wrapper components that only render their children when a condition is met, such as authentication:

// Wrapper that protects its children behind an authentication check
function Protected({ isAuthenticated, children }) {
if (!isAuthenticated) return <p className="text-danger">Login required!</p>;
return children;
}

function App() {
const isLoggedIn = true;

return (
<Protected isAuthenticated={isLoggedIn}>
<h4>Welcome to your dashboard! ?</h4>
</Protected>
);
}

? Example: Conditional Styling Component

Components can decide styling or structure based on props as well:

// Reusable alert component that chooses a CSS class based on the type
function Alert({ type, message }) {
const alertClass =
type === "success"
? "alert alert-success"
: type === "error"
? "alert alert-danger"
: "alert alert-warning";

return <div className={alertClass}>{message}</div>;
}

// Usage:
<Alert type="success" message="Data saved successfully!" />

⚙️ Benefits of Conditional Components

• ✅ Cleaner JSX — no deeply nested if or ternary blocks cluttering logic.
• ✅ Reusable building blocks that can be combined flexibly across pages.
• ✅ Easier testing and debugging — each condition has its own small component.
• ✅ Improved scalability — adding new conditions means adding new components, not new branches everywhere.
• ✅ Better naming and semantics — components like GuestView or EmptyState are self-explanatory.

? Real-World Use Cases

• Authentication and permission-based UI control (admin vs user vs guest).
• Dynamic layouts (mobile vs desktop views, different dashboards per role).
• Feature toggles or A/B testing scenarios.
• Conditional forms, modals, loaders, and alerts.
• Empty states and error states (e.g., NoData, ErrorScreen components).