Rendering condizionale e loop in React

Le condizioni di rendering e i loop React vengono eseguiti utilizzando istruzioni condizionali e strutture di loop in JSX.

 

1. Condizioni di rendering

- Utilizzo: è possibile utilizzare la struttura in JSX per verificare una condizione e rendere diversi elementi in base a tale condizione. if-else if-else

For esempio:

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

- Utilizzo dell'operatore ternario: è inoltre possibile utilizzare l'operatore ternario per accorciare la struttura in JSX. if-else

For esempio:

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

- Utilizzo dell'operatore && logico: quando si desidera visualizzare un elemento solo se una condizione è vera, è possibile utilizzare l'operatore && logico.

For esempio:

{isLoggedIn && <WelcomeUser />}

 

2. Ciclo di rendering

- Utilizzo: è possibile utilizzare il metodo per eseguire iterazioni su un array e visualizzare gli elementi corrispondenti in JSX. map map

For esempio

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

- Utilizzo di un for ciclo: puoi anche utilizzare un for ciclo per iterare su un array e visualizzare gli elementi corrispondenti in JSX.

For esempio:

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

- Utilizzo di for Each: è inoltre possibile utilizzare il for metodo Each per scorrere su un array ed eseguire il rendering degli elementi corrispondenti in JSX.

For esempio:

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

 

Le condizioni e i cicli React consentono di creare interfacce utente flessibili e dinamiche. Utilizzando istruzioni condizionali e strutture di loop in JSX, puoi visualizzare diversi elementi e generare elenchi basati sui dati nella tua React applicazione.