Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Dynamic-rendering

/

Cond

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.

Text 1

class CondState(rx.State):
    show: bool = True

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


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

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.

rx.vstack(
    rx.button("Toggle", on_click=CondState.change),
    rx.cond(
        CondState.show,
        rx.text("Text 1", color="blue"),
        rx.text("Text 2", color="red"),
    ),
    rx.cond(
        ~CondState.show,
        rx.text("Text 1", color="blue"),
        rx.text("Text 2", color="red"),
    ),
)

You can use the logical operators & and | to combine multiple conditions.

True & True => True

True & False => False

True | False => True

class MultiCondState(rx.State):
    cond1: bool = True
    cond2: bool = False
    cond3: bool = True

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


def multi_cond_example():
    return rx.vstack(
        rx.button("Toggle", on_click=MultiCondState.change),
        rx.text(
            rx.cond(MultiCondState.cond1, "True", "False"),
            " & True => ",
            rx.cond(
                MultiCondState.cond1 & MultiCondState.cond3,
                "True",
                "False",
            ),
        ),
        rx.text(
            rx.cond(MultiCondState.cond1, "True", "False"),
            " & False => ",
            rx.cond(
                MultiCondState.cond1 & MultiCondState.cond2,
                "True",
                "False",
            ),
        ),
        rx.text(
            rx.cond(MultiCondState.cond1, "True", "False"),
            " | False => ",
            rx.cond(
                MultiCondState.cond1 | MultiCondState.cond2,
                "True",
                "False",
            ),
        ),
    )

Render one of two components based on a condition.

PropTypeDescriptionValues
condAny

The cond to determine which component to render.

comp1BaseComponent

The component to render if the cond is true.

comp2BaseComponent

The component to render if the cond is false.

Event Triggers

See the full list of default event triggers
← TabsForeach →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting