सशर्त प्रतिपादन और लूप्स इन 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 में संबंधित तत्वों को प्रस्तुत करने के लिए प्रत्येक विधि का भी उपयोग कर सकते हैं।

For उदाहरण:

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

 

स्थितियाँ और लूप React आपको लचीले और गतिशील यूआई बनाने की अनुमति देते हैं। JSX में सशर्त कथन और लूप संरचनाओं का उपयोग करके, आप अपने React एप्लिकेशन में विभिन्न तत्वों को प्रदर्शित कर सकते हैं और डेटा के आधार पर सूचियां तैयार कर सकते हैं।