શરતી રેન્ડરિંગ અને લૂપ્સ ઇન 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 તમને લવચીક અને ગતિશીલ UIs બનાવવાની મંજૂરી આપે છે. React JSX માં કન્ડિશનલ સ્ટેટમેન્ટ્સ અને લૂપ સ્ટ્રક્ચર્સનો ઉપયોગ કરીને, તમે તમારી એપ્લિકેશનમાંના ડેટાના આધારે વિવિધ ઘટકો પ્રદર્શિત કરી શકો છો અને સૂચિઓ બનાવી શકો છો .