షరతులతో కూడిన రెండరింగ్ మరియు లూప్స్ ఇన్ 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>  
))}

- లూప్‌ని ఉపయోగించడం: మీరు శ్రేణిపై మళ్లించడానికి మరియు JSXలో సంబంధిత మూలకాలను అందించడానికి for కూడా లూప్‌ని ఉపయోగించవచ్చు. for

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

- ప్రతిదాన్ని ఉపయోగించడం: మీరు శ్రేణిపై మళ్ళించడానికి మరియు JSXలో సంబంధిత మూలకాలను అందించడానికి ప్రతి పద్ధతిని for కూడా ఉపయోగించవచ్చు. for

For ఉదాహరణ:

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

 

షరతులు మరియు లూప్‌లు React అనువైన మరియు డైనమిక్ UIలను సృష్టించడానికి మిమ్మల్ని అనుమతిస్తాయి. React JSXలో షరతులతో కూడిన స్టేట్‌మెంట్‌లు మరియు లూప్ నిర్మాణాలను ఉపయోగించడం ద్వారా, మీరు మీ అప్లికేషన్‌లోని డేటా ఆధారంగా విభిన్న అంశాలను ప్రదర్శించవచ్చు మరియు జాబితాలను రూపొందించవచ్చు .