Koşullu İşleme ve Döngüler React

İşleme koşulları ve döngüler, React JSX'te koşullu ifadeler ve döngü yapıları kullanılarak yapılır.

 

1. Oluşturma koşulları

- Kullanma: Bir koşulu kontrol etmek ve bu koşula göre farklı öğeler oluşturmak için JSX'teki yapıyı kullanabilirsiniz. if-else if-else

For örnek:

function List({ list }) {  
  if(!list) {  
    return null;  
  }  
  
  if(!list.length) {  
    return <p>Sorry.</p>;  
  } else {  
    return( 
      <div>  
        {list.map(item => <ListItem item={item} />)}  
      </div>  
   );  
  }  
}

- Üçlü operatörü kullanma: JSX'te yapıyı kısaltmak için üçlü operatörü de kullanabilirsiniz. if-else

For örnek:

 {isLoggedin ? <WelcomeUser />: <Login />}

- Mantıksal && operatörünü kullanma: Yalnızca bir koşul doğruysa bir öğeyi görüntülemek istediğinizde, mantıksal && operatörünü kullanabilirsiniz.

For örnek:

{isLoggedIn && <WelcomeUser />}

 

2. Oluşturma döngüleri

- Kullanma: Yöntemi bir dizi üzerinde yineleme yapmak ve JSX'te karşılık gelen öğeleri oluşturmak için kullanabilirsiniz. map map

For örnek

 {users.map((user) =>( 
       <li key={user.id}>{user.name}</li>  
))}

- Döngü kullanma: Bir dizi üzerinde yineleme yapmak ve JSX'te karşılık gelen öğeleri oluşturmak için for bir döngü de kullanabilirsiniz. for

For örnek:

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

- Her Birini Kullanma: Ayrıca, bir dizi üzerinde yineleme yapmak ve JSX'te karşılık gelen öğeleri oluşturmak için Each yöntemini for kullanabilirsiniz. for

For örnek:

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

 

Koşullar ve döngüler, React esnek ve dinamik kullanıcı arayüzleri oluşturmanıza olanak tanır. JSX'te koşullu ifadeler ve döngü yapıları kullanarak, uygulamanızda farklı öğeleri görüntüleyebilir ve verilere dayalı listeler oluşturabilirsiniz React.