শর্তসাপেক্ষ রেন্ডারিং এবং লুপ ইন React

JSX-এ শর্তসাপেক্ষ বিবৃতি এবং লুপ স্ট্রাকচার ব্যবহার করে রেন্ডারিং কন্ডিশন এবং লুপ ইন React করা হয়।

 

1. রেন্ডারিং শর্ত

- ব্যবহার: আপনি একটি শর্ত পরীক্ষা করতে এবং সেই শর্তের উপর ভিত্তি করে বিভিন্ন উপাদান রেন্ডার করতে JSX-এর কাঠামো ব্যবহার করতে পারেন। if-else if-else

For উদাহরণ:

function List({ list }) {  
  if(!list) {  
    return null;  
  }  
  
  if(!list.length) {  
    return <p>Sorry.</p>;  
  } else {  
    return( 
      <div>  
        {list.map(item => <ListItem item={item} />)}  
      </div>  
   );  
  }  
}

- টারনারি অপারেটর ব্যবহার করা: আপনি JSX-এ স্ট্রাকচার ছোট করতে টারনারি অপারেটর ব্যবহার করতে পারেন। if-else

For উদাহরণ:

 {isLoggedin ? <WelcomeUser />: <Login />}

- লজিক্যাল && অপারেটর ব্যবহার করা: যখন আপনি শুধুমাত্র একটি উপাদান প্রদর্শন করতে চান যদি একটি শর্ত সত্য হয়, আপনি লজিক্যাল && অপারেটর ব্যবহার করতে পারেন।

For উদাহরণ:

{isLoggedIn && <WelcomeUser />}

 

2. রেন্ডারিং লুপ

- ব্যবহার করা: আপনি একটি অ্যারের উপর পুনরাবৃত্তি করতে এবং JSX-এ সংশ্লিষ্ট উপাদানগুলি রেন্ডার করতে পদ্ধতিটি ব্যবহার করতে পারেন। map map

For উদাহরণ

 {users.map((user) =>( 
       <li key={user.id}>{user.name}</li>  
))}

- একটি for লুপ ব্যবহার করা: আপনি for একটি অ্যারের উপর পুনরাবৃত্তি করতে এবং JSX-এ সংশ্লিষ্ট উপাদানগুলি রেন্ডার করতে একটি লুপ ব্যবহার করতে পারেন।

For উদাহরণ:

let usersList = [];
for(let i = 0; i < users.length; i++) {  
  usersList.push(<li key={users[i].id}>{users[i].name}</li>);  
}  
return <ul>{usersList}</ul>;  

- for প্রতিটি ব্যবহার করা: আপনি for একটি অ্যারের উপর পুনরাবৃত্তি করতে এবং JSX-এ সংশ্লিষ্ট উপাদানগুলি রেন্ডার করতে প্রতিটি পদ্ধতি ব্যবহার করতে পারেন।

For উদাহরণ:

let usersList = [];  
users.forEach((user) => {  
  usersList.push(<li key={user.id}>{user.name}</li>);  
});  
return <ul>{usersList}</ul>;

 

শর্ত এবং লুপ ইন React আপনাকে নমনীয় এবং গতিশীল UI তৈরি করতে দেয়। JSX-এ শর্তসাপেক্ষ বিবৃতি এবং লুপ স্ট্রাকচার ব্যবহার করে, আপনি বিভিন্ন উপাদান প্রদর্শন করতে পারেন এবং আপনার React অ্যাপ্লিকেশনে ডেটার উপর ভিত্তি করে তালিকা তৈরি করতে পারেন।