Conditional Rendering

We use the cond component to conditionally render components. The cond component acts in a similar way to a conditional (ternary) operator in python, acting in a similar fashion to an if-else statement.

Here is a simple example to show how by checking the value of the state var show we can render either blue text or red text.

The first argument to the cond component is the condition we are checking. Here the condition is the value of the state var boolean show.

If show is True then the 2nd argument to the cond component is rendered, in this case that is rx.text("Text 1", color="blue").

If show is False then the 3rd argument to the cond component is rendered, in this case that is rx.text("Text 2", color="red").

You can use var operations with the cond component. To learn more generally about var operators check out these docs. The logical operator ~ can be used to negate a condition. In this example we show that by negating the condition ~CondNegativeState.show within the cond, we then render the rx.text("Text 1", color="blue") component when the state var show is negative.

It is also possible to make up complex conditions using the logical or (|) and logical and (&) operators.

Here we have an example using the var operators >=, <=, &. We define a condition that if a person has an age between 18 and 65, including those ages, they are able to work, otherwise they cannot.

We could equally use the operator | to represent a logical or in one of our conditions.

We can also reuse a cond component several times by defining it within a function that returns a cond.

In this example we define the function render_item. This function takes in an item, uses the cond to check if the item is_packed. If it is packed it returns the item_name with a ✔ next to it, and if not then it just returns the item_name.

We can also nest cond components within each other to create more complex logic. In python we can have an if statement that then has several elif statements before finishing with an else. This is also possible in reflex using nested cond components. In this example we check whether a number is positive, negative or zero.

Here is the python logic using if statements:

This reflex code that is logically identical:

Here is a more advanced example where we have three numbers and we are checking which of the three is the largest. If any two of them are equal then we return that Some of the numbers are equal!.

The reflex code that follows is logically identical to doing the following in python:

Cond can also be used to show and hide content in your reflex app. In this example, we have no third argument to the cond operator which means that nothing is rendered if the condition is false.

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.