React Conditional Rendaring Bangla

বন্ধুরা ,আজকের এই সিরিজে আমরা শিখব React Conditional Rendaring নিয়ে। অনেকে React Conditional Rendaring নিয়ে বিস্তারিত জানতে চেয়েছেন, তাই আপনাদের জন্য আজকের পর্বে React Conditional Rendaring নিয়ে বিস্তারিত আলোচনা করব।

অনেক সময় আমদেরকে বিভিন্ন Condition এর উপর নির্ভর করে বিভিন্ন data শো করতে হবে। React এ আমরা javaScript এর syntax ব্যবহার করে jsx rendar করতে পারি। if statement, &&(logical AND), ?{if}, :(else) operators এগুলো দিয়ে condition apply করা হয়।

সূচিপত্রঃ React Conditional Rendaring

• কিভাবে বিভিন্ন condition এর উপর ভিত্তি করে বিভিন্ন jsx return করা হয়
• jsx কে কিভাবে conditionally include or exclude করা যায়
• React codebase এ সকল conditional shortcuts syntax ব্যবহার হয়
• Conditionally returning jsx

কিভাবে বিভিন্ন condition এর উপর ভিত্তি করে বিভিন্ন jsx return করা হয়

ধরুন, আপনার কছে PackingList নামে একটি component আছে, যার মধ্যে কিছু Item rendar হয়। আইটেমগুলোকে আমরা packed or not packed marked করতে পারি।

App.jsx:

function Item({name, isPacked}){

return <li>{name}</li>;

}

export default function PackingList(){

return(

<ul>

<Item isPacked={true} name='space suit' />

<Item isPacked={true} name='Helmet' />

<Item isPacked={false} name='Photo' />

</ul>

)

আরো পড়ুনঃ React এ কিভাবে jsx ব্যবহার করে Markup তৈরী করা যায়

এখানে আপনারা খেয়াল করেছেন, Item component এ isPacked props true set করা আছে। আপনি যদি চান isPacked যতগুলো true থাকবে সেগুলোতে টিকমার্ক দিবেন। তাহলে আপনি if/else statement ব্যবহার করতে পারেন। 

if (isPacked) {

  return <li className="item">{name} ✔</li>;

}

return <li className="item">{name}</li>;

এখন isPacked props যদি true হয়, তাহলে এটা ভিন্ন একটা jsx tree রিটার্ণ করবে। এই পরিবর্তনের ফলে কিছু Item এর শেষে টিক চিহ্ন থাকবে।

App.jsx

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'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>

  );

}

এখানে if এবং return statement react এর কোন syntax নয়, এগুলো javaScript এর syntax

jsx কে কিভাবে conditionally include or exclude করে

কখনো যদি আপনি চান কোন কিছুই রেন্ডার করবেন না। ধরুন, আপনি packed Item গুলো show করতে চাচ্ছেন না, কিন্তু component কে অবশ্যই return করতে হবে। এ ধরনের পরিস্থিতিতে null return করতে হয়। 

if(isPacked){

return null

}

return <li>{name}</li>

এখানে isPacked যদি true হয়, তাহলে component return করবে nothing, অন্যথায়, jsx return করবে rendar করার জন্য। 

App.jsx

function Item({ name, isPacked }) {

  if (isPacked) {

    return null;

  }

  return <li className="item">{name}</li>;

}

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>

  );

}

একটা component থেকে null return করা common বিষয় নয়, এটাকে rendar করার চেষ্টা করা ডেভেলপারের জন্য surprise. parent component এর jsx এ component কে include or exclude করা যায় condition এর উপর ভিত্তি করে। 

condition এর উপর ভিত্তি করে jsx include করা

এতক্ষণ আমরা দেখেছি, component থেকে কোন jsx tree rendar হবে তা controll করা যায়। এতে আমরা কিছু duplicate code দেখেছি।

<li className="item">{name} ✔</li>

এটাও প্রায় একই

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

উপরে ২ জায়গায় <li> return করা হয়েছে। 

if (isPacked) {

  return <li className="item">{name} ✔</li>;

}

return <li className="item">{name}</li>;

যদিও এটা কোন সমস্যা না, কিন্তু এটা code maintain করা কঠিন। এখন যদি className কে পরিবর্তন করতে চান তাহলে ২ জায়গায় পরিবর্তন করতে হবে। এই অবস্থায় conditionally short jsx ব্যবহার করব। ফলে আমাদের কোড DRY হবে। (DRY Don't Repeat Yourself)

if, else এর short হলো ternary operator(?, :) '?' mark if, ':'  else

এই কোডটি দেখুন

if (isPacked) {

  return <li className="item">{name} ✔</li>;

}

return <li className="item">{name}</li>;

উপরের এই কোডটি এইভাবে লিখতে হবে

return (

  <li className="item">

    {isPacked ? name + ' ✔' : name}

  </li>

);

এখন আপনি চাইলে item component এর টেক্সটকে Html এর একটি tag দিয়ে wrap করে দিতে পারেন। এখানে newline এবং parentheses দিয়ে jsx কে আরো সহজভাবে লেখা যায়। 

App.jsx

function Item({ name, isPacked }) {

  return (

    <li className="item">

      {isPacked ? (

        <del>

          {name + ' ✔'}

        </del>

      ) : (

        name

      )}

    </li>

  );

}

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>

  );

}

simple condition এ এই style ব্যবহার ভালো, তবে এর পরিমিত ব্যবহার করতে হবে। যদি component markup জটিল এবং nested conditional হয়, তাহলে child component extract করে clean up করতে হবে।  complex expression এ variable এবং function কে ব্যবহার করা যায়।

Logical AND Operator (&&)

আমরা আরেকটি common shortcut syntax শিখব, তাহলো javaScript logical AND (&&) operator. যখন condition true হবে তখন এই (&&) logical AND operator কাজ করবে। (&&) AND Operator দিয়ে conditionally rendar করব checkmark sign, যদি isPack true হয়ঃ

return (

  <li className="item">

    {name} {isPacked && '✔'}

  </li>

);

এখানে isPacked true হলে (&&) AND কাজ করবে এবং checkmark rendar হবে, অন্যথায় কিছুই rendar হবেনা।

condition ভেদে jsx কে variable এ assign করা।

প্রথমে content একটি variable এর মধ্যে assign করব। যেমনঃ 

let itemContent = name;

যদি isPacked true হয়, তাহলে jsx expression কে itemContent এর মধ্যে reassign করব।

if (isPacked) {

  itemContent = name + " ✔";

}

এখন itemContent variable টি jsx এর ভিতরে curly brace দিয়ে ব্যবহার করব। 

<li className="item">

  {itemContent}

</li>

এখন পুরো codebase টি এরকম হবে

App.jsx

function Item({ name, isPacked }) {

  let itemContent = name;

  if (isPacked) {

    itemContent = name + " ✔";

  }

  return (

    <li className="item">

      {itemContent}

    </li>

  );

}

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>

  );

}

এটা শুধু text এর জন্য কাজ করবে এমন নয়, এটা arbitrary jsx এর জন্যও কাজ করে।

App.jsx

function Item({ name, isPacked }) {

  let itemContent = name;

  if (isPacked) {

    itemContent = (

      <del>

        {name + " ✔"}

      </del>

    );

  }

  return (

    <li className="item">

      {itemContent}

    </li>

  );

}

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>

  );

}

আপনারা দীর্ঘ সময় নিয়ে পড়েছেন React Conditional Rendaring, আশা কির বুজতে পেরেছেন React Conditional Rendaring কিভাবে কাজ করে। React Conditional Rendaring দিয়ে কিভাবে কাজ করা হয় এবং React Conditional Rendaring এর যাবতীয় খুটিনাটি বিষয় সমূহ।