Ahora lo ves: renderizado condicional

Si el usuario ha iniciado sesión, "Bienvenido"; si no, "Inicia sesión". Muchas veces una app tiene que mostrar una vista distinta según su estado. En esta lección usarás rx.cond, que cambia la vista en función de un valor del State.

2-1. Cambiar la vista con rx.cond (3 min)

class LoginState(rx.State):
    logged_in: bool = False

    @rx.event
    def toggle_login(self):
        self.logged_in = not self.logged_in


def show_login():
    return rx.box(
        rx.cond(
            LoginState.logged_in,
            rx.heading("Logged In", as_="h2"),
            rx.heading("Not Logged In", as_="h2"),
        ),
        rx.button("Toggle Login", on_click=LoginState.toggle_login),
    )

rx.cond recibe tres argumentos.

• El tercer argumento es opcional. Si escribes rx.cond(LoginState.logged_in, rx.text("Welcome!")), el texto solo aparece cuando el usuario ha iniciado sesión; en caso contrario, no se muestra nada.
• El manejador toggle_login es un manejador de eventos como los de la lección 1. Usa not para invertir verdadero y falso.

2-2. ¿Y por qué no usar un if normal? (2 min)

En Python, lo natural sería escribir algo así:

def show_login():
    if LoginState.logged_in:
        return rx.heading("Logged In", as_="h2")
    return rx.heading("Not Logged In", as_="h2")

Este código no funciona. La función de la interfaz se ejecuta una sola vez, al arrancar la app, y en ese momento todavía no se sabe si el usuario ha iniciado sesión. rx.cond deja en la interfaz una instrucción que dice "más tarde, mira el valor en el navegador y elige".

En la lección 4 verás con detalle por qué ocurre esto. Por ahora, quédate con esto: "para bifurcar la interfaz según un valor del State, usa rx.cond".

Ejercicios

1. En show_login, haz que el texto del botón también cambie según el estado: "Log In" / "Log Out". Pista: pon un rx.cond(...) en el lugar del hijo del botón.
2. rx.cond también sirve para valores de props. Haz que el color del título sea "green" si el usuario ha iniciado sesión y "gray" si no.

Lista de comprobación de esta lección

• Sé explicar qué es cada uno de los tres argumentos de rx.cond.
• Sé qué pasa si omito el tercer argumento.
• Sé que en el código de la interfaz no debo usar if con valores del State.