Rendering Bersyarat dan Loops in React

Rendering kondisi dan perulangan React dilakukan dengan menggunakan pernyataan bersyarat dan struktur perulangan di JSX.

 

1. Kondisi rendering

- Menggunakan: Anda dapat menggunakan struktur di JSX untuk memeriksa kondisi dan merender elemen yang berbeda berdasarkan kondisi tersebut. if-else if-else

For contoh:

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

- Menggunakan operator ternary: Anda juga dapat menggunakan operator ternary untuk mempersingkat struktur di JSX. if-else

For contoh:

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

- Menggunakan operator logika &&: Saat Anda hanya ingin menampilkan elemen jika suatu kondisi benar, Anda dapat menggunakan operator logika &&.

For contoh:

{isLoggedIn && <WelcomeUser />}

 

2. Merender loop

- Menggunakan: Anda dapat menggunakan metode untuk beralih ke array dan merender elemen yang sesuai di JSX. map map

For contoh

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

- Menggunakan for perulangan: Anda juga dapat menggunakan for perulangan untuk mengulangi larik dan merender elemen terkait di JSX.

For contoh:

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

- Menggunakan for Masing-Masing: Anda juga dapat menggunakan for metode Setiap untuk mengulangi larik dan merender elemen terkait di JSX.

For contoh:

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

 

Kondisi dan loop React memungkinkan Anda membuat UI yang fleksibel dan dinamis. Dengan menggunakan pernyataan bersyarat dan struktur loop di JSX, Anda dapat menampilkan berbagai elemen dan membuat daftar berdasarkan data di React aplikasi Anda.