Representación condicional y bucles en React

Las condiciones de representación y los bucles React se realizan mediante sentencias condicionales y estructuras de bucle en JSX.

 

1. Condiciones de renderizado

- Uso: puede usar la estructura en JSX para verificar una condición y representar diferentes elementos en función de esa condición. if-else if-else

For ejemplo:

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 el operador ternario: También puede usar el operador ternario para acortar la estructura en JSX. if-else

For ejemplo:

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

- Uso del operador lógico &&: cuando solo desea mostrar un elemento si una condición es verdadera, puede usar el operador lógico &&.

For ejemplo:

{isLoggedIn && <WelcomeUser />}

 

2. Bucles de renderizado

- Usando: puede usar el método para iterar sobre una matriz y representar los elementos correspondientes en JSX. map map

For ejemplo

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

- Uso de un for bucle: también puede usar un for bucle para iterar sobre una matriz y representar los elementos correspondientes en JSX.

For ejemplo:

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

- Uso de for Each: también puede usar el for método Each para iterar sobre una matriz y representar los elementos correspondientes en JSX.

For ejemplo:

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

 

Las condiciones y los bucles React le permiten crear interfaces de usuario flexibles y dinámicas. Mediante el uso de declaraciones condicionales y estructuras de bucle en JSX, puede mostrar diferentes elementos y generar listas basadas en los datos de su React aplicación.