Renderização condicional e loops em React

As condições de renderização e os loops React são feitos usando declarações condicionais e estruturas de loop no JSX.

 

1. Condições de renderização

- Usando: você pode usar a estrutura em JSX para verificar uma condição e renderizar diferentes elementos com base nessa condição. if-else if-else

For exemplo:

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

- Usando o operador ternário: Você também pode usar o operador ternário para encurtar a estrutura em JSX. if-else

For exemplo:

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

- Usando o operador lógico &&: Quando você só deseja exibir um elemento se uma condição for verdadeira, você pode usar o operador lógico &&.

For exemplo:

{isLoggedIn && <WelcomeUser />}

 

2. Loops de renderização

- Usando: Você pode usar o método para iterar sobre uma matriz e renderizar os elementos correspondentes em JSX. map map

For exemplo

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

- Usando um for loop: Você também pode usar um for loop para iterar sobre uma matriz e renderizar os elementos correspondentes em JSX.

For exemplo:

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

- Usando for Each: Você também pode usar o for método Each para iterar sobre um array e renderizar elementos correspondentes em JSX.

For exemplo:

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

 

Condições e loops React permitem que você crie UIs flexíveis e dinâmicas. Ao usar instruções condicionais e estruturas de loop no JSX, você pode exibir diferentes elementos e gerar listas com base nos dados de seu React aplicativo.