ReactBeginner

Conditional Rendering

React-এ শর্ত দিয়ে UI — if/else, &&, ternary, null pattern — বাংলায়।

7টি অংশবাংলা ভাষায়

তিনটি উপায়

if / && / ternaryjsx

jsx

function Greeting({ user }) {
  // উপায় ১ — if/else (ভিন্ন return)
  if (!user) {
    return <p>লগইন করুন</p>;
  }

  // উপায় ২ — && (সত্য হলে দেখাও)
  return (
    <div>
      <h2>স্বাগতম, {user.name}</h2>
      {user.badge && <span className="badge">{user.badge}</span>}

      {/* উপায় ৩ — ternary */}
      {user.age >= 18 ? <p>প্রাপ্তবয়স্ক</p> : <p>নাবালক</p>}
    </div>
  );
}

null — কিছুই না দেখানো

null returnjsx

jsx

function Spinner({ show }) {
  if (!show) return null; // কিছুই render হবে না
  return <div className="spinner" />;
}

0-এর সমস্যা

{count && …} লিখলে count 0 হলে 0 দেখাবে — ভুল। এর বদলে {count > 0 && …} বা {!!count && …} ব্যবহার করুন।

List + condition

filter + renderjsx

jsx

const items = ["মাইক", "হেডফোন", "ল্যাপটপ"];

function List() {
  return (
    <ul>
      {items
        .filter((name) => name !== "মাইক")
        .map((name) => (
          <li key={name}>{name}</li>
        ))}
    </ul>
  );
}

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।