Conditional Rendering in React – বিস্তারিত বাংলায় ব্যাখ্যা

React-এ Conditional Rendering বলতে বোঝায় — কোন শর্তের ভিত্তিতে UI-এর নির্দিষ্ট অংশ দেখানো বা লুকানো। অর্থাৎ, কোডে চেক করা হবে কোন condition সত্য কিনা, তার উপর ভিত্তি করে React ভিন্ন ভিন্ন UI রেন্ডার করবে।

এটি ঠিক HTML এর if-else বা JavaScript এর conditional logic-এর মতো কাজ করে, কিন্তু যেহেতু React JSX ব্যবহার করে, তাই শর্ত ফেলে UI পরিবর্তন করা খুবই সহজ।

🔹 Conditional Rendering কেন দরকার?

বাস্তব অ্যাপে বিভিন্ন সময়ে ভিন্ন UI দেখাতে হয়, যেমন:

• User logged in হলে Dashboard দেখানো
• Logged in না হলে Login form দেখানো
• Loading চললে Spinner দেখানো
• Error হলে Error message দেখানো
• Search result না মিললে “No Data Found” দেখানো

এসব করার জন্যই conditional rendering ব্যবহৃত হয়।

🔹 ১. Simple If Condition (JSX-এ)

শর্ত সত্য হলে UI রেন্ডার করা:

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn && <h2>Welcome User</h2>}
    </div>
  );
}

✔️ ব্যাখ্যা:

• isLoggedIn == true হলে <h2> রেন্ডার হবে
• শর্ত false হলে কিছুই দেখাবে না

🔹 ২. If–Else (Ternary Operator)

React-এ ternary operator সবচেয়ে জনপ্রিয়:

function App() {
  const isLoggedIn = false;

  return (
    <div>
      {isLoggedIn ? <h2>Welcome Back!</h2> : <h2>Please Login</h2>}
    </div>
  );
}

✔️ ব্যাখ্যা:

• isLoggedIn true → Welcome Back
• false → Please Login

🔹 ৩. If–Else with Multiple Conditions

function Status({ role }) {
  return (
    <div>
      {role === "admin" ? (
        <h2>Welcome Admin</h2>
      ) : role === "user" ? (
        <h2>Welcome User</h2>
      ) : (
        <h2>Access Denied</h2>
      )}
    </div>
  );
}

একাধিক শর্ত থাকলে nested ternary ব্যবহার করা যায় (যদিও পড়তে কঠিন হয়)।

🔹 ৪. Conditional Rendering with Functions

জটিল condition হলে আলাদা function ব্যবহার করা ভালো:

function App() {
  const isLoading = false;

  function renderUI() {
    if (isLoading) {
      return <h3>Loading...</h3>;
    }
    return <h3>Data Loaded Successfully</h3>;
  }

  return (
    <div>
      {renderUI()}
    </div>
  );
}

🔹 ৫. AND Operator (&&)

যদি শুধুমাত্র true হলে কিছু দেখাতে চান:

{score > 80 && <p>Excellent Result!</p>}

✔️ score > 80 হলে টেক্সট দেখাবে ❌ না হলে কিছুই দেখাবে না

🔹 ৬. Show/Hide Example

function App() {
  const [show, setShow] = React.useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Toggle</button>

      {show && <p>This is a secret message!</p>}
    </div>
  );
}

🔹 ৭. Login / Logout Example (Most Common)

function Auth() {
  const [loggedIn, setLoggedIn] = React.useState(false);

  return (
    <div>
      {loggedIn ? (
        <div>
          <h2>Welcome User</h2>
          <button onClick={() => setLoggedIn(false)}>Logout</button>
        </div>
      ) : (
        <div>
          <h2>Please Login</h2>
          <button onClick={() => setLoggedIn(true)}>Login</button>
        </div>
      )}
    </div>
  );
}

🔹 Conditional Rendering এর Best Practices

• Inline complex logic লেখা এড়িয়ে যান — function ব্যবহার করুন
• Nested ternary যতটা সম্ভব কম ব্যবহার করুন
• Short condition হলে &&& ব্যবহার করুন
• বড় UI condition অনুযায়ী ভাগ করে component বানিয়ে ফেলুন

🔹 Summary

• React-এ বিভিন্ন UI শর্ত অনুযায়ী পরিবর্তন করা হয়
• সাধারণ condition → && operator
• if–else এর জন্য → ternary
• বড় condition → আলাদা function
• Conditional rendering হলো Dynamic UI-র মূল ভিত্তি

🎉 শেষ কথা

Conditional Rendering React-এর সবচেয়ে গুরুত্বপূর্ণ অংশগুলোর একটি। আপনি যদি dynamic, smart এবং user-friendly UI তৈরি করতে চান, তাহলে এই কনসেপ্টটি খুব ভালভাবে অনুশীলন করা জরুরি।