This component is used to conditionally render components.

The cond component takes a condition and two components. If the condition is True, the first component is rendered, otherwise the second component is rendered.

The second component is optional and can be omitted. If it is omitted, nothing is rendered if the condition is False.

You can use the logical operator ~ to negate a condition.

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 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: