Renderizado condicional

El renderizado condicional en React se refiere a la técnica de mostrar diferentes elementos o componentes según una condición dada. Esto te permite controlar dinámicamente qué parte de tu interfaz de usuario se muestra en función del estado de tu aplicación, los datos recibidos o cualquier otra lógica condicional. Hay varias formas de implementar el renderizado condicional en React, aquí tienes algunos ejemplos:

1. Renderizado condicional con operador ternario:

const Usuario = ({ isLoggedIn }) => {
    return (
        <div>
            {isLoggedIn ? (
                <h1>Bienvenido de vuelta, Usuario</h1>
            ) : (
                <h1>Inicia sesión para continuar</h1>
            )}
        </div>
    );
};

En este ejemplo, isLoggedIn es una variable booleana que determina si el usuario está conectado o no. Dependiendo del valor de isLoggedIn, se muestra un mensaje de bienvenida o un mensaje de inicio de sesión.

2. Renderizado condicional con operador lógico &&:

const Usuario = ({ isLoggedIn }) => {
    return (
        <div>
            {isLoggedIn && <h1>Bienvenido de vuelta, Usuario</h1>}
        </div>
    );
};

En este ejemplo, si isLoggedIn es verdadero, se muestra el mensaje de bienvenida. Si isLoggedIn es falso, el componente no renderiza nada.

3. Renderizado condicional con declaraciones if:

const Usuario = ({ isLoggedIn }) => {
    if (isLoggedIn) {
        return <h1>Bienvenido de vuelta, Usuario</h1>;
    } else {
        return <h1>Inicia sesión para continuar</h1>;
    }
};

Aquí, utilizamos la estructura de control if-else tradicional para realizar el renderizado condicional. Dependiendo del valor de isLoggedIn, se devuelve un elemento diferente.

4. Renderizado condicional con componentes:

const UsuarioAutenticado = () => <h1>Bienvenido de vuelta, Usuario</h1>;
const UsuarioNoAutenticado = () => <h1>Inicia sesión para continuar</h1>;

const Usuario = ({ isLoggedIn }) => {
    return (
        <div>
            {isLoggedIn ? <UsuarioAutenticado /> : <UsuarioNoAutenticado />}
        </div>
    );
};

Aquí, tenemos dos componentes funcionales separados, UsuarioAutenticado y UsuarioNoAutenticado, que representan diferentes estados del usuario. Dependiendo del valor de isLoggedIn, se renderiza uno u otro componente.

El renderizado condicional en React es una técnica poderosa que te permite crear interfaces de usuario dinámicas y receptivas. Puedes utilizar cualquiera de estas formas según tu preferencia y el contexto específico de tu aplicación.