```python exec
import reflex as rx

from pcweb.pages.docs import vars, library
```

# 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.

```md alert
Check out the API reference for [cond docs]({library.layout.cond.path}).
```

```python eval
rx.box(height="2em")
```

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")`.

```python demo exec
class CondSimpleState(rx.State):
    show: bool = True

    def change(self):
        self.show = not (self.show)


def cond_simple_example():
    return rx.vstack(
        rx.button("Toggle", on_click=CondSimpleState.change),
        rx.cond(
            CondSimpleState.show,
            rx.text("Text 1", color="blue"),
            rx.text("Text 2", color="red"),
        ),
    )
```

## Var Operations (negation)

You can use var operations with the `cond` component. To learn more generally about var operators check out [these docs]({vars.var_operations.path}). 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.

```python demo exec
class CondNegativeState(rx.State):
    show: bool = True

    def change(self):
        self.show = not (self.show)


def cond_negative_example():
    return rx.vstack(
        rx.text(f"Value of state var show: {CondNegativeState.show}"),
        rx.button("Toggle", on_click=CondNegativeState.change),
        rx.cond(
            CondNegativeState.show,
            rx.text("Text 1", color="blue"),
            rx.text("Text 2", color="red"),
        ),
        rx.cond(
            ~CondNegativeState.show,
            rx.text("Text 1", color="blue"),
            rx.text("Text 2", color="red"),
        ),
    )
```

## Multiple Conditions

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.

```python demo exec
import random

class CondComplexState(rx.State):
    age: int = 19

    def change(self):
        self.age = random.randint(0, 100)


def cond_complex_example():
    return rx.vstack(
        rx.button("Toggle", on_click=CondComplexState.change),
        rx.text(f"Age: {CondComplexState.age}"),
        rx.cond(
            (CondComplexState.age >= 18) & (CondComplexState.age <=65),
            rx.text("You can work!", color="green"),
            rx.text("You cannot work!", color="red"),
        ),
    )

```

## Reusing Cond

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`.

```python demo exec
class ToDoListItem(rx.Base):
    item_name: str
    is_packed: bool

class CondRepeatState(rx.State):
    to_do_list: list[ToDoListItem] = [
        ToDoListItem(item_name="Space suit", is_packed=True), 
        ToDoListItem(item_name="Helmet", is_packed=True),
        ToDoListItem(item_name="Back Pack", is_packed=False),
        ]


def render_item(item: [str, bool]):
    return rx.cond(
        item.is_packed, 
        rx.chakra.list_item(item.item_name + ' ✔'),
        rx.chakra.list_item(item.item_name),
        )

def packing_list():
    return rx.vstack(
        rx.text("Sammy's Packing List"),
        rx.chakra.list(rx.foreach(CondRepeatState.to_do_list, render_item)),
    )

```

## Nested Conditional

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:

```python
number = 0

if number > 0:
    print("Positive number")

elif number == 0:
    print('Zero')
else:
    print('Negative number')
```

This reflex code that is logically identical:

```python demo exec
import random


class NestedState(rx.State):
    
    num: int = 0

    def change(self):
        self.num = random.randint(-10, 10)


def cond_nested_example():
    return rx.vstack(
        rx.button("Toggle", on_click=NestedState.change),
        rx.cond(
            NestedState.num > 0,
            rx.text(f"{NestedState.num} is Positive!", color="orange"),
            rx.cond(
                NestedState.num == 0,
                rx.text(f"{NestedState.num} is Zero!", color="blue"),
                rx.text(f"{NestedState.num} is Negative!", color="red"),
            )
        ),
    )

```

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:

```python
a = 8
b = 10
c = 2

if((a>b and a>c) and (a != b and a != c)): 
 print(a, " is the largest!") 
elif((b>a and b>c) and (b != a and b != c)): 
 print(b, " is the largest!") 
elif((c>a and c>b) and (c != a and c != b)): 
 print(c, " is the largest!") 
else: 
 print("Some of the numbers are equal!") 
```

```python demo exec
import random


class CNS(rx.State):
    # CNS: CondNestedState
    a: int = 8
    b: int = 10
    c: int = 2
    

    def change(self):
        self.a = random.randint(0, 10)
        self.b = random.randint(0, 10)
        self.c = random.randint(0, 10)


def cond_nested_example_2():
    return rx.vstack(
        rx.button("Toggle", on_click=CNS.change),
        rx.text(f"a: {CNS.a}, b: {CNS.b}, c: {CNS.c}"),
        rx.cond(
            ((CNS.a > CNS.b) & (CNS.a > CNS.c)) & ((CNS.a != CNS.b) & (CNS.a != CNS.c)),
            rx.text(f"{CNS.a} is the largest!", color="green"),
            rx.cond(
                ((CNS.b > CNS.a) & (CNS.b > CNS.c)) & ((CNS.b != CNS.a) & (CNS.b != CNS.c)),
                rx.text(f"{CNS.b} is the largest!", color="orange"),
                rx.cond(
                    ((CNS.c > CNS.a) & (CNS.c > CNS.b)) & ((CNS.c != CNS.a) & (CNS.c != CNS.b)),
                    rx.text(f"{CNS.c} is the largest!", color="blue"),
                    rx.text("Some of the numbers are equal!", color="red"),
                ),
            ),
        ),
    )

```

## Cond used as a style prop

`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.

```python demo exec
class CondStyleState(rx.State):
    show: bool = False
    img_url: str = "/preview.png"
    def change(self):
        self.show = not (self.show)


def cond_style_example():
    return rx.vstack(
        rx.button("Toggle", on_click=CondStyleState.change),
        rx.cond(
            CondStyleState.show,
            rx.image(
                src=CondStyleState.img_url,
                height="25em",
                width="25em",
            ),
        ),
    )
```