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.

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

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

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

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.

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.

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:

number = 0

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

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

This reflex code that is logically identical:

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:

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!")

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.

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",
            ),
        ),
    )

conditional_rendering.md 8.0 KB Histórico Em bruto