অধ্যায়: শর্ত অনুযায়ী কিছু দেখানো (Conditional Rendering)

আমাদের অ্যাপ এ অনেক কম্পোনেট বা JSX থাকবে, যেগুলো আমাদের কন্ডিশনালি রেন্ডার করতে হবে।

শুরুর আগে

React অ্যাপে অনেক সময় এমন হয়, কিছু কিছু জিনিস দেখাবো কি না—তা নির্ভর করে কোনো শর্ত বা অবস্থা (condition)-এর উপর। যেমন ধরো:

• ইউজার লগ ইন করলে তার নাম দেখাবো,
• না করলে “Please login” বলবো।

এটাকেই বলে Conditional Rendering—মানে: শর্ত অনুযায়ী JSX দেখানো।

React-এ আমরা JavaScript-এর if, &&, আর ? : এই তিনটা টেকনিক ব্যবহার করে শর্ত অনুযায়ী JSX রেন্ডার করতে পারি।

এই অধ্যায়ে আমরা এই বিষয়টাই ধাপে ধাপে, উদাহরণ দিয়ে শিখবো।

এই অধ্যায় থেকে তুমি শিখবে:

✅ কিভাবে কোনো শর্ত অনুযায়ী JSX রিটার্ন করতে হয়

✅ কিভাবে চাইলে JSX-এর কোনো অংশ দেখানো বন্ধ করে দিতে পারো

✅ React কোডে যেসব শর্টকাট কন্ডিশনাল সিনট্যাক্স ব্যবহার হয়, সেগুলো চিনে নিতে পারবে

সেকশন ১: শর্ত অনুযায়ী JSX রিটার্ন করা

চলো একটা মজার উদাহরণ দিয়ে শুরু করি।

ধরো, তুমি একটা Packing List বানাচ্ছো। মানে কেউ কোথাও যেতে যাচ্ছে, তার জন্য কী কী জিনিসপত্র লাগবে, সেই তালিকা।

তুমি নিচের মতো করে PackingList নামের একটা কম্পোনেন্ট বানালে:

function Item({ name, isPacked }) {
  return <li className="item">{name}</li>;
}
 
export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride-এর ব্যাগে কী কী থাকবে?</h1>
      <ul>
        <Item isPacked={true} name="Space suit" />
        <Item isPacked={true} name="Helmet with a golden leaf" />
        <Item isPacked={false} name="Photo of Tam" />
      </ul>
    </section>
  );
}

এখানে প্রতিটা আইটেমে isPacked নামে একটা প্রপ (prop) আছে—যেটা বলে ওই জিনিসটা ব্যাগে রাখা হয়েছে কি না।

তুমি এখন চাইছো — যেসব জিনিস প্যাকড (packed) হয়ে গেছে, তাদের নামের পাশে একটা ✅ চিহ্ন দেখাবে।

কিভাবে শর্ত অনুযায়ী JSX রিটার্ন করবো?

আমরা এটা if ব্যবহার করে খুব সহজে করতে পারি:

export deault function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✅</li>;
  }
  return <li className="item">{name}</li>;
}

এই কোডটা দেখে বোঝা যাচ্ছে:

• যদি isPacked true হয়, তাহলে ✅ সহ নাম দেখাও।
• না হলে শুধু নামটাই দেখাও।

এখন আমাদের পুরো কোডটা এমন দাঁড়ায়:

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✅</li>;
  }
  return <li className="item">{name}</li>;
}
 
export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride-এর ব্যাগে কী কী থাকবে?</h1>
      <ul>
        <Item isPacked={true} name="Space suit" />
        <Item isPacked={true} name="Helmet with a golden leaf" />
        <Item isPacked={false} name="Photo of Tam" />
      </ul>
    </section>
  );
}

বোঝার বিষয়

এই উদাহরণ থেকে একটা জিনিস পরিষ্কার:

👉 React-এ শর্ত (condition) চেক করা হয় JavaScript দিয়েই। JSX-এর ভেতর তুমি ইচ্ছেমতো if, return, ?:, && এসব ব্যবহার করতে পারো।

সেকশন ১.১: শর্ত সাপেক্ষে UI এ কোনো কিছু দেখাতে চাই না — null দিয়ে সেটা সম্ভব

React-এ আপনি সাধারণত কোনও কম্পোনেন্ট থেকে JSX রিটার্ন করেন — মানে কিছু HTML-এর মতো কোড যা UI-তে দেখায়।

কিন্তু এমন সময় আসতে পারে, যখন আপনি একদম কোনো কিছুই দেখাতে চান না।

ভাবুন এই সিনারিওটা:

আপনি একটা Packing List বানাচ্ছেন — যেখানে ইউজার ঠিক করে কোন কোন আইটেম সে ব্যাগে রেখেছে।

এখন আপনি চান, যে আইটেমগুলো আগে থেকেই প্যাক করা, সেগুলো লিস্টে না দেখাতে।

এই কাজটা কীভাবে করবেন?

React-এ আপনি চাইলে একটা কম্পোনেন্ট থেকে null রিটার্ন করতে পারেন — মানে একদম কিছুই রেন্ডার করবে না।

চলুন একটা উদাহরণ দেখি:

function Item({ name, isPacked }) {
  if (isPacked) {
    return null; // আগেই প্যাক করা? তাহলে কিছু দেখিও না
  }
 
  return <li className="item">{name}</li>;
}

এখানে কি হচ্ছে?

• যদি isPacked true হয়, মানে আইটেমটা আগে থেকেই প্যাক করা — তাহলে React কিছুই দেখাবে না।
• আর যদি isPacked false হয় — তখনই শুধু name দেখানো হবে।

এখন পুরো লিস্টটা দেখি:

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride-এর ব্যাগের লিস্ট</h1>
      <ul>
        <Item isPacked={true} name="Space suit" />
        <Item isPacked={true} name="Helmet with a golden leaf" />
        <Item isPacked={false} name="Photo of Tam" />
      </ul>
    </section>
  );
}

কী হবে এখানে?

• Space suit আর Helmet দেখাবে না, কারণ ওগুলো আগেই প্যাক করা।
• শুধু “Photo of Tam” দেখা যাবে, কারণ ওটা এখনো প্যাক হয়নি।

মনে রাখবেন:

কম্পোনেন্ট থেকে null রিটার্ন করা মানে, একদম UI এ কিছুই রেন্ডার হবে না।

তবে এটা খুব বেশি ব্যবহার হয় না, কারণ এটা অন্য ডেভেলপারদের বিভ্রান্ত করতে পারে — তারা ভাবতে পারে কম্পোনেন্টটা আছে, কিন্তু কিছুই দেখা যাচ্ছে না কেন?

আরেকটা ভালো উপায় হলো:

কম্পোনেন্ট রেন্ডার করব কি করব না — সেই সিদ্ধান্ত প্যারেন্ট কম্পোনেন্টেই নেওয়া।

দারুণ! আমরা এবার সেকশন ২ শুরু করছি — একদম ছোট ভাইকে বোঝানোর মতো করে, প্রাঞ্জল, সহজ আর ঘরোয়া ভাষায়।

সেকশন ২: JSX কন্ডিশন অনুযায়ী দেখানো

React-এ JSX মানে হচ্ছে যেটা ব্রাউজারে দেখানো হবে — যেমন টেক্সট, বাটন, লিস্ট ইত্যাদি।

এখন ধরো, তুমি চাইছো কিছু জিনিস শর্ত অনুযায়ী দেখাতে। মানে, কোনটা দেখাবে আর কোনটা দেখাবে না — সেটা ঠিক হবে কোনো মানের (value) উপর ভিত্তি করে।

একটু উদাহরণ দেই 👇

ধরো, তুমি একটা ব্যাগ প্যাকিং লিস্ট বানাচ্ছো।

প্রতিটি আইটেমের পাশে ✅ থাকবে, যদি সেটা প্যাক করা থাকে। আর যদি না থাকে, তাহলে শুধু নামটাই থাকবে।

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

দেখো, দুইটা রিটার্ন-ই <li className="item">...</li> দিয়ে শুরু হচ্ছে।

শুধু ভেতরের লেখাটা ভিন্ন।

এখন ভাবো, যদি একদিন className="item" বদলাতে চাও, তাহলে দুই জায়গায় গিয়ে ঠিক করতে হবে। এতে কোড বড় হয়ে যায় আর ঝামেলা বাড়ে।

এই রকম ক্ষেত্রে আমরা চাই কোড যেন ডুপ্লিকেট না হয়, এক জায়গায়ই সব লেখা যায়।

এই জন্য আমরা ব্যবহার করব JavaScript এর কন্ডিশনাল অপারেটর।

সেকশন ২.১: শর্ত অনুযায়ী দেখানোর শর্টকাট: ? :

JavaScript-এ ? : অপারেটরকে বলে টারনারি (ternary) অপারেটর। এইটা দিয়ে খুব সুন্দরভাবে এক লাইনে শর্ত অনুযায়ী JSX লিখা যায়।

একই উদাহরণ এবার একটু ছোট করে লিখি 👇

return <li className="item">{isPacked ? name + " ✅" : name}</li>;

এটা মানে দাঁড়ায় —

যদি isPacked সত্যি হয়, তাহলে দেখাও name + ✅, আর যদি না হয়, তাহলে শুধু name।

👉 এটাকে তুমি মনে রাখতে পারো এমনভাবে: “শর্ত? সত্য হলে এটা দেখাও : মিথ্যা হলে ওটা দেখাও”

একটা বাস্তব উদাহরণ ধরো:

function PackingItem({ name, isPacked }) {
  return <li className="item">{isPacked ? name + " ✅" : name}</li>;
}

এখানে প্রতিটা আইটেমে ✅ আসবে কিনা, সেটা নির্ভর করছে isPacked এর উপর।

সামারি টারনারি অপারেটর💡

টারনারি অপারেটর ব্যবহার করলে —

✅ কোড ছোট হয় ✅ বারবার একই JSX লিখতে হয় না ✅ পড়ে বুঝতে সহজ হয়

চলুন ভাইয়া, আমরা শুরু করি সেকশন ২.১.১ — যেখানে আমরা বুঝে নেব JSX-এর ভিতরের কাজকর্ম কীভাবে চলে। আমি আপনাকে একদম ছোট ভাই মনে করে, সহজ ভাষায় বোঝাচ্ছি।

এই দুইটা উদাহরণ কি আসলেই এক?

চলুন ভাই, আমরা এই নতুন সেকশনটাও সহজ, প্রাঞ্জল ও শিক্ষণীয়ভাবে লিখে ফেলি। আমরা ধরে নিচ্ছি পাঠক React শিখছেন বাংলায়, বন্ধু-বন্ধু ভাবে, কোনো জটিলতা ছাড়াই।

সেকশন ২.১.১: এই দুইটা উদাহরণ কি পুরোপুরি একরকম?

প্রথমে একটা বিষয় বুঝে নেই— যদি আপনি অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং (OOP) থেকে এসে থাকেন, তাহলে আপনার মনে হতে পারে:

"হুম... একেকটা JSX এলিমেন্ট মানে বুঝি একেকটা নতুন instance তৈরি হচ্ছে!"

এমন ভাবাটা স্বাভাবিক।

"JSX এলিমেন্ট মানে বুঝি একেকটা নতুন instance তৈরি হচ্ছে!"

এই ভাবনাটা আসে আমাদের OOP অভ্যাস থেকে। মনে হয় <Item /> মানেই বুঝি নতুন object তৈরি হচ্ছে।

কিন্তু আসলে JSX:

❌ কোনও instance তৈরি করে না ✅ শুধু React কে বলে: “এই কম্পোনেন্টটা রেন্ডার করো এই data পরিবর্তন দিয়ে।”

তাই JSX ও OOP-এর instance সম্পূর্ণ আলাদা জিনিস।

কিন্তু React-এ JSX এলিমেন্ট মানেই নতুন কোনও instance না।

👉 এতে কোনও “ভেতরের অবস্থা” বা স্টেট থাকে না 👉 এটা ব্রাউজারের আসল DOM এলিমেন্টও না

সোজা কথায়, JSX এলিমেন্ট মানে হচ্ছে: 📄 একটা বর্ণনা দেয়া, কেমন দেখতে হবে DOM টা, শুধু তা-ই।

তাই নিচের দুইটা JSX লেখা দেখতে আলাদা লাগলেও, বাস্তবে React-এর চোখে এরা একেবারে একই জিনিস।

এখন প্রশ্ন হলো:

“তাহলে আমরা যে <li> দু'ভাবে লিখি, তা কি React-এর দৃষ্টিতে একরকম?”

উত্তর: হ্যাঁ, একদম।

এই বিষয়টা আরও গভীরে ব্যাখ্যা করা আছে এই অধ্যায়ে: 👉 স্টেট রক্ষা ও রিসেট করা (Preserving and Resetting State)

একটু কাজের দিকে যাই

ধরা যাক, আপনি এখন চান যদি কোনও আইটেম প্যাক করা থাকে, তাহলে তার টেক্সটের ওপরে দাগ (strike-through) দিতে চান।

HTML-এ আমরা এজন্য <del> ট্যাগ ব্যবহার করি।

React-এ আমরা চাইলে JSX-এর মধ্যে এটাও সহজেই লিখতে পারি।

চলুন নিচের কোডটা দেখি:

function Item({ name, isPacked }) {
  return (
    <li className="item">{isPacked ? <del>{name + " ✅"}</del> : name}</li>
  );
}

এখানে আমরা কী করেছি?

• যদি isPacked সত্যি হয়, তাহলে <del> দিয়ে নামটার ওপরে দাগ দিয়ে দেখাই
• আর যদি না হয়, তাহলে সরাসরি নামটাই দেখাই

👉 এই শর্তটা আমরা JSX-এর ভেতরেই লিখেছি।

এবার পুরো কম্পোনেন্টটা দেখি:

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item isPacked={true} name="Space suit" />
        <Item isPacked={true} name="Helmet with a golden leaf" />
        <Item isPacked={false} name="Photo of Tam" />
      </ul>
    </section>
  );
}

এখানে তিনটা আইটেম আছে। যেগুলো isPacked={true}, সেগুলোর নামের ওপরে <del> দিয়ে দাগ পড়বে।

টিপস: বেশি জটিলতা আসলে? টুকরো করে ফেলুন!

এইভাবে JSX-এর মধ্যে শর্ত বসানো ভালো, কিন্তু একটা পর্যায়ের পর যদি কোড জটিল হয়ে যায়, তাহলে কী করবেন?

👉 ছোট ছোট কম্পোনেন্টে ভাগ করে নিন 👉 বা লজিকটা এক্সট্রা ফাংশনে নিয়ে যান

React আপনাকে সেই স্বাধীনতা দেয় কারণ JSX মানেই জাভাস্ক্রিপ্ট কোড।

শেষ কথা

JSX দেখতে HTML-এর মতো হলেও, এর আচরণ অনেকটাই আলাদা।

এই উদাহরণ থেকে আমরা শিখলাম:

✅ JSX-এ এলিমেন্ট মানেই DOM এলিমেন্ট না

✅ কন্ডিশনাল রেন্ডারিং সহজেই JSX-এর মধ্যে করা যায়

✅ JSX ব্লুপ্রিন্টের মতো, কাজ করে React-এর জন্য

✅ কোড জটিল হয়ে গেলে ছোট কম্পোনেন্ট বানিয়ে ক্লিন রাখাই ভালো

চলুন, প্রাঞ্জল বাংলায় শুরু করি সেকশন ২.২: Logical AND (&&) অপারেটর—একটা ছোট্ট কিন্তু দারুণ কাজের টেকনিক!

সেকশন ২.২

&& অপারেটর: শর্ত মিললেই দেখাও, না মিললে কিছুই না

React কম্পোনেন্টে অনেক সময় এমন প্রয়োজন পড়ে— একটা শর্ত ঠিক থাকলে কিছু দেখাব, আর না থাকলে কিছুই দেখাব না।

এই কাজটা খুব সহজে করা যায় JavaScript-এর && (Logical AND) অপারেটরের সাহায্যে।

চলুন, উদাহরণ দিয়ে বুঝি।

ধরুন, আপনি একটা প্যাকিং লিস্ট বানাচ্ছেন

প্রতিটি জিনিসের নামের পাশে ✅ চিহ্ন দেখাতে চান, যদি সেই জিনিসটি প্যাক করা থাকে।

আপনি চাইলে নিচের মতো কোড লিখতে পারেন:

<li>
  {name} {isPacked && "✅"}
</li>

এটা মানে হলো: 👉 যদি isPacked সত্য (true) হয়, তাহলে ✅ দেখাও। 👉 আর যদি isPacked মিথ্যা (false) হয়, তাহলে কিছুই দেখিও না।

পুরো কোডটা একবার দেখে নিই:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && "✅"}
    </li>
  );
}
 
export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride-এর প্যাকিং লিস্ট</h1>
      <ul>
        <Item isPacked={true} name="স্পেস স্যুট" />
        <Item isPacked={true} name="গোল্ডেন পাতাওয়ালা হেলমেট" />
        <Item isPacked={false} name="ট্যামের ছবি" />
      </ul>
    </section>
  );
}

এখানে আমরা দেখতে পাচ্ছি:

• স্পেস স্যুটের পাশে ✅ আছে (কারণ isPacked true)
• হেলমেটের পাশেও ✅ আছে
• কিন্তু "ট্যামের ছবি"-র পাশে কিছুই নেই (কারণ isPacked false)

🤔 কিভাবে && কাজ করে?

JavaScript-এ && অপারেটর বলে: "বাঁ দিকটা যদি সত্য হয়, তবে ডান দিকটা দেখাও।" আর যদি বাঁ দিকটা মিথ্যা হয়, তবে কিছুই দেখিও না।

React এটাকে ভালোভাবে বুঝে নেয়— false, null, বা undefined মান থাকলে React সেগুলো স্কিপ করে দেয়।

⚠️ একটি সাধারণ ভুল: সংখ্যাকে বাঁ পাশে রাখা

অনেকে নিচের মতো কোড লিখে ফেলেন:

{
  messageCount && <p>New messages</p>;
}

আপনি ভাবছেন, যদি messageCount হয় 0, তাহলে তো কিছুই দেখাবে না। কিন্তু, বাস্তবে 0 truthy নয়, তাই 0 && কিছু রিটার্ন করে 0! আর React সেই 0-কে দেখিয়েই দেয়!

সমাধান কী?

{
  messageCount > 0 && <p>New messages</p>;
}

এবার যদি messageCount হয় 0, তাহলে false হবে, আর কিছুই দেখাবে না।

সারসংক্ষেপ

✅ && অপারেটর দিয়ে শর্ত থাকলে JSX রেন্ডার করা যায়। 🚫 কিন্তু ভুল করে সংখ্যাকে সরাসরি শর্ত হিসেবে ব্যবহার করবেন না। 👍 শর্তে true/false ফেলা সবচেয়ে নিরাপদ।

চলুন এবার শুরু করি আমাদের নতুন সেকশন – একদম সহজ, প্রাঞ্জল বাংলায়, যেন একজন নতুন React শিখতে থাকা শিক্ষার্থীও হাসিমুখে বুঝতে পারে।

সেকশন ২.৩: কন্ডিশন অনুযায়ী JSX কে ভ্যারিয়েবলে রাখা

🔗 ({/*conditionally-assigning-jsx-to-a-variable*/})

React-এ অনেক সময় আমরা চাই, কিছু JSX কোড শুধু নির্দিষ্ট শর্তে (condition) দেখানো হোক। অনেকেই এক লাইনেই ? : বা && দিয়ে লিখে ফেলে — কিন্তু সেটা সবসময় বোঝা সহজ না।

তখন আপনি চাইলে সাধারণ if স্টেটমেন্ট ব্যবহার করে একটু পরিষ্কারভাবে কোড লিখতে পারেন। এটা একটু বড় হতে পারে, কিন্তু শেখা ও বুঝতে অনেক সহজ।

উদাহরণ:

ধরুন, আপনি একজন নভোচারীর ব্যাগ লিস্ট বানাচ্ছেন। আপনি চান, প্যাক হয়ে গেলে আইটেমের পাশে ✅ চিহ্ন দেখাবে।

তাহলে আপনি প্রথমে একটা ভ্যারিয়েবল বানাতে পারেন:

let itemContent = name;

এরপর আপনি if দিয়ে চেক করে JSX পরিবর্তন করতে পারেন:

if (isPacked) {
  itemContent = name + " ✅";
}

অবশেষে JSX-এ সেই ভ্যারিয়েবলটি {} ব্যবহার করে বসিয়ে দিন:

<li className="item">{itemContent}</li>

পূর্ণ কোডটা নিচে:

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = name + " ✅";
  }
 
  return <li className="item">{itemContent}</li>;
}
 
export default function PackingList() {
  return (
    <section>
      <h1>স্যালি রাইডের প্যাকিং লিস্ট</h1>
      <ul>
        <Item isPacked={true} name="স্পেস স্যুট" />
        <Item isPacked={true} name="হেলমেট (সোনালী পাতা লাগানো)" />
        <Item isPacked={false} name="ট্যামের ছবি" />
      </ul>
    </section>
  );
}

JSX-ও বসানো যায়

শুধু টেক্সট না, আপনি চাইলে ভেতরে পুরা JSX-ও বসাতে পারেন। যেমন, প্যাক হয়ে গেলে সেই আইটেমটিকে কেটে (strike-through) দেখাতে চান?

if (isPacked) {
  itemContent = <del>{name + " ✅"}</del>;
}

এইভাবে কোড হবে:

function Item({ name, isPacked }) {
  let itemContent = name;
  if (isPacked) {
    itemContent = <del>{name + " ✅"}</del>;
  }
 
  return <li className="item">{itemContent}</li>;
}

মনে রাখার মতো কিছু কথা:

Recap:

• React-এ আপনি JavaScript দিয়েই লজিক কন্ট্রোল করেন।
• চাইলে if স্টেটমেন্ট দিয়ে JSX আলাদা ভ্যারিয়েবলে রেখে পরে JSX-এ বসাতে পারেন।
• JSX-এ {cond ? <A /> : <B />} মানে — cond সত্য হলে <A />, না হলে <B />।
• JSX-এ {cond && <A />} মানে — cond সত্য হলে <A />, না হলে কিছুই না।
• if স্টেটমেন্ট একটু বড় হলেও, নতুনদের জন্য অনেক বেশি পরিষ্কার আর সহজ।