Rendering kondisional lan Loops ing React

Kondisi Rendering lan loop in React rampung nggunakake statement kondisional lan struktur loop ing JSX.

 

1. kahanan Rendering

- Nggunakake: Sampeyan bisa nggunakake struktur ing JSX kanggo mriksa kondisi lan nerjemahake unsur beda adhedhasar kondisi kasebut. if-else if-else

For contone:

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

- Nggunakake operator ternary: Sampeyan uga bisa nggunakake operator ternary kanggo shorten struktur ing JSX. if-else

For contone:

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

- Nggunakake operator logis &&: Yen sampeyan mung pengin nampilake unsur yen kondisi bener, sampeyan bisa nggunakake logis && operator.

For contone:

{isLoggedIn && <WelcomeUser />}

 

2. Rendering puteran

- Nggunakake: Sampeyan bisa nggunakake cara kanggo ngulang array lan nerjemahake unsur sing cocog ing JSX. map map

For contone

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

- Nggunakake for daur ulang: Sampeyan uga bisa nggunakake for daur ulang kanggo ngulang array lan nerjemahake unsur sing cocog ing JSX.

For contone:

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

- Nggunakake for Saben: Sampeyan uga bisa nggunakake for metode Saben kanggo ngulang array lan nerjemahake unsur sing cocog ing JSX.

For contone:

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

 

Kahanan lan puteran React ngidini sampeyan nggawe UI sing fleksibel lan dinamis. Kanthi nggunakake statement kondisional lan struktur loop ing JSX, sampeyan bisa nampilake macem-macem unsur lan ngasilake dhaptar adhedhasar data ing React aplikasi sampeyan.