Cómo se realiza el renderizado condicional en React

Vista previa del material en texto

¿Cómo se realiza el renderizado condicional en React? 
 
El renderizado condicional en React se refiere a la técnica de mostrar diferentes componentes o 
contenido en función de ciertas condiciones. Esto permite que los componentes respondan y 
muestren contenido diferente en función del estado de la aplicación o de las propiedades recibidas. 
 
Hay varias formas de realizar el renderizado condicional en React, y aquí te mostraré algunas de las 
más comunes: 
 
1. Condicional dentro del JSX: 
 Puedes utilizar operadores ternarios o el operador lógico `&&` dentro del JSX para realizar una 
evaluación y decidir qué componente o contenido mostrar. 
 
 Ejemplo con operador ternario: 
 ******************************************************* 
 import React from 'react'; 
 
 const MiComponente = ({ isLoggedIn }) => { 
 return ( 
 <div> 
 {isLoggedIn ? <p>Bienvenido, usuario</p> : <p>Inicia sesión</p>} 
 </div> 
 ); 
 }; 
 
 export default MiComponente; 
 ************************************************** 
 
 Ejemplo con operador lógico `&&`: 
 *************************************************** 
 import React from 'react'; 
 
 const MiComponente = ({ isLoggedIn }) => { 
 return ( 
 <div> 
 {isLoggedIn && <p>Bienvenido, usuario</p>} 
 </div> 
 ); 
 }; 
 
 export default MiComponente; 
 *************************************************** 
 
2. Condicional usando funciones o componentes: 
 Puedes definir funciones o componentes separados para representar el contenido condicional, y 
luego llamarlos dentro del JSX dependiendo de la condición. 
 
 Ejemplo con función separada: 
 ************************************************** 
 import React from 'react'; 
 
 const MensajeBienvenida = () => { 
 return <p>Bienvenido, usuario</p>; 
 }; 
 
 const MensajeLogin = () => { 
 return <p>Inicia sesión</p>; 
 }; 
 
 const MiComponente = ({ isLoggedIn }) => { 
 return ( 
 <div> 
 {isLoggedIn ? <MensajeBienvenida /> : <MensajeLogin />} 
 </div> 
 ); 
 }; 
 
 export default MiComponente; 
 ********************************************** 
 
3. Condicional usando una sentencia if: 
 Aunque no puedes usar una sentencia if directamente dentro del JSX, puedes usarla fuera del 
return para decidir qué componente renderizar. 
 
 ********************************************** 
 import React from 'react'; 
 
 const MiComponente = ({ isLoggedIn }) => { 
 if (isLoggedIn) { 
 return <p>Bienvenido, usuario</p>; 
 } else { 
 return <p>Inicia sesión</p>; 
 } 
 }; 
 
 export default MiComponente; 
 ************************************************* 
 
4. Condicional usando un Switch: 
 Si tienes muchas opciones para renderizar condicionalmente, puedes usar un switch para decidir 
qué componente o contenido mostrar. 
 
 ************************************************* 
 import React from 'react'; 
 
 const MiComponente = ({ tipoUsuario }) => { 
 switch (tipoUsuario) { 
 case 'admin': 
 return <p>Bienvenido, administrador</p>; 
 case 'user': 
 return <p>Bienvenido, usuario</p>; 
 default: 
 return <p>Inicia sesión</p>; 
 } 
 }; 
 
 export default MiComponente; 
 ************************************************** 
 
El renderizado condicional en React es una característica poderosa que te permite crear interfaces 
dinámicas y reactivas en función del estado de la aplicación o de las propiedades recibidas. Puedes 
elegir la técnica que mejor se adapte a tu caso particular y a la complejidad de la lógica condicional 
que necesitas implementar.