सशर्त प्रस्तुतीकरण आणि लूप इन 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 अॅप्लिकेशनमधील डेटावर आधारित सूची तयार करू शकता.