Conditional Rendering

Recall from the basics that we cannot use Python if/else statements when referencing state vars in Reflex. Instead, use the rx.cond component to conditionally render components or set props based on the value of a state var.

Below is a simple example showing how to toggle between two text components by checking the value of the state var show.

If show is True then the first component is rendered (in this case the blue text). Otherwise the second component is rendered (in this case the red text).

You can also set props conditionally using rx.cond. In this example, we set the color prop of a text component based on the value of the state var show.

You can use var operations with the cond component for more complex conditions. See the full cond reference for more details.

The rx.match component in Reflex provides a powerful alternative torx.cond for handling multiple conditional statements and structural pattern matching. This component allows you to handle multiple conditions and their associated components in a cleaner and more readable way compared to nested rx.cond structures.