Now you see it: conditional rendering

"Welcome" if you're logged in, "Please log in" if you're not. Apps often need to show different content depending on their state. In this lesson, you'll use rx.cond to change the page based on a State value.

2-1. Switching content with 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 takes three arguments.

• The third argument is optional. If you write rx.cond(LoginState.logged_in, rx.text("Welcome!")), the text appears only when you're logged in, and nothing is shown otherwise.
• The toggle_login handler is an ordinary event handler, just like in Lesson 1. It uses not to flip between true and false.

2-2. So why not just use if? (2 min)

In plain Python, you'd be tempted to write this:

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

This code doesn't work. A UI function runs only once, when the app starts, and at that point there's no way to know whether the user is logged in. rx.cond plants an instruction in the page instead: "check the value later, in the browser, and pick one."

Lesson 4 explains in detail why this happens. For now, just remember: "to branch on a State value in UI code, use rx.cond."

Exercises

1. In show_login, make the button label change with the state too, switching between "Log In" and "Log Out". Hint: put an rx.cond(...) where the button's child goes.
2. rx.cond works for prop values as well. Make the heading's color "green" when logged in and "gray" otherwise.

Checkpoint

• You can explain what each of the three arguments to rx.cond is.
• You know what happens when you leave out the third argument.
• You know not to use if on State values in UI code.