ਕੰਡੀਸ਼ਨਲ ਰੈਂਡਰਿੰਗ ਅਤੇ ਲੂਪਸ ਇਨ 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 ਬਣਾਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ। JSX ਵਿੱਚ ਕੰਡੀਸ਼ਨਲ ਸਟੇਟਮੈਂਟਾਂ ਅਤੇ ਲੂਪ ਸਟ੍ਰਕਚਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਤੱਤਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਤੁਹਾਡੀ React ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਡੇਟਾ ਦੇ ਆਧਾਰ 'ਤੇ ਸੂਚੀਆਂ ਬਣਾ ਸਕਦੇ ਹੋ।