ReactJS Conditional Rendering

ReactJS-এ Conditional Rendering হলো কোনো condition বা শর্ত অনুযায়ী UI-এর নির্দিষ্ট অংশ দেখানো বা লুকানো।

যেমন, একজন user login করলে আমরা Dashboard দেখাতে পারি। আর login না করলে Login message দেখাতে পারি।

ReactJS application-এ Login System, User Role, Loading State, Error Message, Permission এবং Dynamic UI তৈরি করতে Conditional Rendering খুব গুরুত্বপূর্ণ।

এই tutorial-এ আমরা শিখব:

• Conditional Rendering কী

• const দিয়ে condition তৈরি করা

• if statement

• Ternary Operator

• Logical AND (&&)

• Logical OR (||)

• Variable দিয়ে UI তৈরি

• switch statement

• return null

• Login/Logout example

• Multiple Conditions

• Conditional CSS Class

• Best Practices

---

Conditional Rendering কী?

সাধারণ JavaScript-এ আমরা condition ব্যবহার করে সিদ্ধান্ত নিতে পারি।

const isLoggedIn = true;

if (isLoggedIn) {
  // Dashboard
} else {
  // Login
}

ReactJS-এও একই concept ব্যবহার করে condition অনুযায়ী JSX render করা যায়।

উদাহরণ:

const isLoggedIn = true;

function App() {
  if (isLoggedIn) {
    return <h1>Welcome Back!</h1>;
  }

  return <h1>Please Login</h1>;
}

export default App;

এখানে isLoggedIn এর value true, তাই:

Welcome Back!

দেখাবে।

যদি value false করা হয়:

const isLoggedIn = false;

তাহলে:

Please Login

দেখাবে।

---

1. if Statement দিয়ে Conditional Rendering

Conditional Rendering-এর সবচেয়ে basic পদ্ধতিগুলোর একটি হলো if statement।

const isLoggedIn = true;

function UserStatus() {
  if (isLoggedIn) {
    return <h2>Welcome to your Dashboard!</h2>;
  }

  return <h2>Please login to continue.</h2>;
}

export default UserStatus;

এখানে:

const isLoggedIn = true;

দিয়ে condition-এর value নির্ধারণ করা হয়েছে।

যদি value true হয়:

Welcome to your Dashboard!

দেখাবে।

আর false হলে:

Please login to continue.

দেখাবে।

কখন if ব্যবহার করবেন?

যখন condition-এর logic তুলনামূলকভাবে বড় হয় অথবা condition অনুযায়ী সম্পূর্ণ আলাদা JSX return করতে হয়, তখন if ব্যবহার করা সুবিধাজনক।

---

2. Ternary Operator দিয়ে Conditional Rendering

ReactJS-এ সবচেয়ে বেশি ব্যবহৃত Conditional Rendering pattern হলো Ternary Operator।

এর syntax:

condition ? trueValue : falseValue

একটি basic example:

const isLoggedIn = true;

function App() {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome!</h1> : <h1>Please Login</h1>}
    </div>
  );
}

export default App;

এখানে:

isLoggedIn ? <h1>Welcome!</h1> : <h1>Please Login</h1>

এর অর্থ:

• condition true → Welcome!

• condition false → Please Login

আরেকটি Example

const isAdmin = true;

function App() {
  return (
    <div>
      {isAdmin ? <p>Admin Panel</p> : <p>User Panel</p>}
    </div>
  );
}

export default App;

এখানে isAdmin এর value true, তাই Admin Panel দেখা যাবে।

---

3. Logical AND (&&) ব্যবহার

কোনো condition true হলে একটি নির্দিষ্ট element দেখাতে চাইলে && ব্যবহার করা যায়।

Syntax:

condition && <Component />

Example:

const isLoggedIn = true;

function App() {
  return (
    <div>
      {isLoggedIn && <button>Logout</button>}
    </div>
  );
}

export default App;

এখানে isLoggedIn যদি true হয়, তাহলে Logout button দেখা যাবে।

যদি:

const isLoggedIn = false;

হয়, তাহলে button render হবে না।

Notification Example

const notificationCount = 5;

function Notifications() {
  return (
    <div>
      {notificationCount > 0 && (
        <p>You have {notificationCount} new notifications.</p>
      )}
    </div>
  );
}

export default Notifications;

এখানে:

notificationCount > 0

সত্য হলে notification message দেখাবে।

---

4. Logical OR (||) দিয়ে Fallback

কোনো value না থাকলে default value দেখানোর জন্য || ব্যবহার করা যায়।

const userName = "";

function User() {
  return <h2>{userName || "Guest User"}</h2>;
}

export default User;

userName empty হওয়ায় এখানে:

Guest User

দেখাবে।

যদি:

const userName = "Shihab";

হয়, তাহলে:

Shihab

দেখাবে।

এটি optional user information বা fallback text-এর জন্য বেশ useful।

---

5. const Variable দিয়ে UI তৈরি

অনেক সময় JSX-এর মধ্যে সরাসরি condition লিখলে code কিছুটা বড় হয়ে যায়।

তখন আগে একটি const variable তৈরি করে UI নির্ধারণ করা যায়।

const isOnline = true;

function Status() {
  const message = isOnline
    ? "User is Online"
    : "User is Offline";

  return <h2>{message}</h2>;
}

export default Status;

এখানে:

const message = isOnline
  ? "User is Online"
  : "User is Offline";

condition অনুযায়ী message-এর value নির্ধারণ করছে।

তারপর:

<h2>{message}</h2>

দিয়ে UI-তে দেখানো হয়েছে।

---

6. const দিয়ে Conditional JSX

শুধু text নয়, পুরো JSX element-ও একটি const variable-এর মধ্যে রাখা যায়।

const isLoggedIn = true;

function App() {
  const content = isLoggedIn ? (
    <h2>Welcome to Dashboard</h2>
  ) : (
    <h2>Please Login</h2>
  );

  return <div>{content}</div>;
}

export default App;

এতে main return অংশটি পরিষ্কার থাকে।

---

7. switch Statement দিয়ে Conditional Rendering

যখন অনেকগুলো possible condition থাকে, তখন switch ব্যবহার করা সুবিধাজনক।

const status = "loading";

function Status() {
  switch (status) {
    case "loading":
      return <p>Loading...</p>;

    case "success":
      return <p>Data loaded successfully!</p>;

    case "error":
      return <p>Something went wrong!</p>;

    default:
      return <p>Unknown status</p>;
  }
}

export default Status;

এখানে status অনুযায়ী আলাদা UI render হচ্ছে।

যেমন:

const status = "loading";

হলে:

Loading...

দেখাবে।

আর:

const status = "success";

হলে:

Data loaded successfully!

দেখাবে।

API-based React application-এ এই pattern অনেক কাজে লাগে।

---

8. return null ব্যবহার

কখনো আমরা চাই কোনো condition পূরণ না হলে component কোনো UI render করবে না।

এক্ষেত্রে null return করা যায়।

const showWarning = false;

function Warning() {
  if (!showWarning) {
    return null;
  }

  return <p>Warning! Something went wrong.</p>;
}

export default Warning;

এখানে:

const showWarning = false;

তাই component কোনো UI দেখাবে না।

যদি:

const showWarning = true;

করা হয়, তাহলে warning message দেখা যাবে।

---

9. Real-World Login Example

এবার একটি ছোট Login/Logout example দেখি।

import { useState } from "react";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const buttonText = isLoggedIn ? "Logout" : "Login";

  const message = isLoggedIn
    ? "Welcome to the Dashboard!"
    : "Please login to continue.";

  return (
    <div>
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {buttonText}
      </button>

      <h2>{message}</h2>
    </div>
  );
}

export default App;

এখানে প্রথমে:

const [isLoggedIn, setIsLoggedIn] = useState(false);

এর মাধ্যমে user logged out অবস্থায় থাকবে।

তাই:

Login
Please login to continue.

দেখাবে।

Button click করলে:

setIsLoggedIn(!isLoggedIn)

state পরিবর্তন করবে।

এখন isLoggedIn হবে true।

তখন:

Logout
Welcome to the Dashboard!

দেখাবে।

এটি ReactJS Conditional Rendering-এর একটি practical example।

---

10. Multiple Conditions

একাধিক condition থাকলে Ternary ব্যবহার করা যায়।

const role = "admin";

function UserRole() {
  const content =
    role === "admin"
      ? <h2>Admin Dashboard</h2>
      : role === "editor"
      ? <h2>Editor Dashboard</h2>
      : <h2>User Dashboard</h2>;

  return <div>{content}</div>;
}

export default UserRole;

এখানে তিনটি role রয়েছে:

• admin

• editor

• user

তবে অনেকগুলো nested ternary ব্যবহার করলে code পড়তে কঠিন হতে পারে।

এ ধরনের ক্ষেত্রে switch বা আলাদা component ব্যবহার করা ভালো।

---

11. Conditional Rendering দিয়ে CSS Class পরিবর্তন

Condition অনুযায়ী CSS class-ও পরিবর্তন করা যায়।

const isOnline = true;

function Status() {
  const statusClass = isOnline ? "online" : "offline";
  const statusText = isOnline ? "Online" : "Offline";

  return (
    <p className={statusClass}>
      {statusText}
    </p>
  );
}

export default Status;

এখানে isOnline true হলে:

className="online"

এবং:

Online

দেখাবে।

আর false হলে:

className="offline"

এবং:

Offline

দেখাবে।

12. Loading এবং Error State

React application-এ API থেকে data load করার সময় সাধারণত Loading, Success এবং Error—এই তিন ধরনের UI দরকার হয়।

const status = "loading";

function App() {
  const content =
    status === "loading"
      ? <p>Loading data...</p>
      : status === "error"
      ? <p>Failed to load data.</p>
      : <p>Data loaded successfully!</p>;

  return <div>{content}</div>;
}

export default App;

এ ধরনের conditional UI real-world application-এ অনেক বেশি ব্যবহৃত হয়।

---

কোন Method কখন ব্যবহার করবেন?

Method	কখন ব্যবহার করবেন
if	Complex condition বা আলাদা JSX return করতে
Ternary ? :	দুইটি UI-এর মধ্যে নির্বাচন করতে
&&	Condition true হলে একটি UI দেখাতে
`		`	Default বা fallback value দিতে
const variable	JSX পরিষ্কার রাখতে
switch	অনেকগুলো condition handle করতে
return null	কোনো UI render না করতে

---

Common Mistake: && এবং 0

&& ব্যবহার করার সময় একটি বিষয় মনে রাখা দরকার।

এই code:

const count = 0;

function App() {
  return <div>{count && <p>Notifications</p>}</div>;
}

এখানে count এর value 0 হলে React সেটি render করতে পারে।

তাই আরও পরিষ্কারভাবে লিখুন:

const count = 0;

function App() {
  return (
    <div>
      {count > 0 && <p>Notifications</p>}
    </div>
  );
}

export default App;

এতে condition স্পষ্ট থাকে এবং code সহজে বোঝা যায়।

---

Conditional Rendering-এর Best Practices

1. Simple condition হলে Ternary ব্যবহার করুন

const isLoggedIn = true;

const content = isLoggedIn
  ? <Dashboard />
  : <Login />;

2. শুধু একটি element দেখাতে হলে && ব্যবহার করুন

const isAdmin = true;

const content = isAdmin && <AdminPanel />;

3. Complex logic হলে if ব্যবহার করুন

const status = "error";

if (status === "error") {
  return <ErrorMessage />;
}

4. অনেকগুলো condition হলে switch ব্যবহার করুন

এতে code আরও organized রাখা যায়।

5. অতিরিক্ত nested ternary এড়িয়ে চলুন

একাধিক nested ternary code-কে unnecessarily complex করে ফেলতে পারে।

6. Reusable UI হলে আলাদা Component তৈরি করুন

Conditional logic অনেক বড় হয়ে গেলে একই component-এর মধ্যে সব logic না রেখে ছোট ছোট component তৈরি করা ভালো।

ReactJS-এর Conditional Rendering একটি fundamental concept। React দিয়ে real-world application তৈরি করতে গেলে বিভিন্ন condition অনুযায়ী UI পরিবর্তন করার প্রয়োজন প্রায় সবসময়ই হয়।

Login/Logout, User Role, API Loading, Error Handling, Permission, Notification এবং Dynamic Styling—সব ক্ষেত্রেই Conditional Rendering ব্যবহার করা যায়।

শুরুতে এই চারটি pattern ভালোভাবে বুঝে নিন:

// if
if (condition) {
  return <Component />;
}

// Ternary
const content = condition
  ? <ComponentA />
  : <ComponentB />;

// AND
const content = condition && <Component />;

// OR
const name = userName || "Guest";

আর condition-এর result আগে variable-এ রাখতে চাইলে const ব্যবহার করতে পারেন:

const content = condition
  ? <h2>Yes</h2>
  : <h2>No</h2>;

ReactJS শেখার পরবর্তী ধাপে Lists & Keys, Forms, Hooks এবং API Data Fetching শেখা আপনার React development skill আরও শক্তিশালী করবে।