مشروط رینڈرنگ اور لوپس ان React

React JSX میں مشروط بیانات اور لوپ ڈھانچے کا استعمال کرتے ہوئے رینڈرنگ کنڈیشنز اور لوپس ان کیے جاتے ہیں۔

 

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 میں ایک صف پر تکرار کرنے اور متعلقہ عناصر کو رینڈر کرنے کے لیے Each طریقہ بھی استعمال کر سکتے ہیں۔

For مثال:

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

 

حالات اور لوپس React آپ کو لچکدار اور متحرک UIs بنانے کی اجازت دیتے ہیں۔ JSX میں مشروط بیانات اور لوپ ڈھانچے کا استعمال کرتے ہوئے، آپ مختلف عناصر کو ظاہر کر سکتے ہیں اور اپنی React درخواست میں ڈیٹا کی بنیاد پر فہرستیں بنا سکتے ہیں۔