Rendu conditionnel et boucles dans React

Les conditions de rendu et les boucles React sont effectuées à l'aide d'instructions conditionnelles et de structures de boucle dans JSX.

 

1. Conditions de rendu

- Utilisation: Vous pouvez utiliser la structure dans JSX pour vérifier une condition et afficher différents éléments en fonction de cette condition. if-else if-else

For exemple:

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

- Utilisation de l'opérateur ternaire: Vous pouvez également utiliser l'opérateur ternaire pour raccourcir la structure dans JSX. if-else

For exemple:

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

- Utilisation de l'opérateur logique &&: Lorsque vous ne souhaitez afficher un élément que si une condition est vraie, vous pouvez utiliser l'opérateur logique &&.

For exemple:

{isLoggedIn && <WelcomeUser />}

 

2. Boucles de rendu

- Utilisation: Vous pouvez utiliser la méthode pour itérer sur un tableau et rendre les éléments correspondants dans JSX. map map

For exemple

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

- Utilisation d'une for boucle : vous pouvez également utiliser une for boucle pour itérer sur un tableau et rendre les éléments correspondants dans JSX.

For exemple:

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

- Utilisation for de Each: vous pouvez également utiliser la for méthode Each pour parcourir un tableau et restituer les éléments correspondants dans JSX.

For exemple:

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

 

Les conditions et les boucles React vous permettent de créer des interfaces utilisateur flexibles et dynamiques. En utilisant des instructions conditionnelles et des structures de boucle dans JSX, vous pouvez afficher différents éléments et générer des listes basées sur les données de votre React application.