You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
10
+
Recall from the [basics]({docs.getting_started.basics.path}) that we cannot use Python `if/else` statements when referencing state vars in Reflex. Instead, use the `rx.cond` component to conditionally render components or set props based on the value of a state var.
10
11
11
12
```md video https://youtube.com/embed/ITOZkzjtjUA?start=6040&end=6463
12
13
# Video: Conditional Rendering
@@ -20,13 +21,7 @@ We use the `cond` component to conditionally render components. The `cond` compo
20
21
rx.box(height="2em")
21
22
```
22
23
23
-
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.
24
-
25
-
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`.
26
-
27
-
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")`.
28
-
29
-
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")`.
24
+
Below is a simple example showing how to toggle between two text components by checking the value of the state var `show`.
30
25
31
26
```python demo exec
32
27
classCondSimpleState(rx.State):
@@ -48,243 +43,40 @@ def cond_simple_example():
48
43
)
49
44
```
50
45
51
-
## Var Operations (negation)
52
-
53
-
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.
54
-
55
-
```python demo exec
56
-
classCondNegativeState(rx.State):
57
-
show: bool=True
58
-
59
-
@rx.event
60
-
defchange(self):
61
-
self.show =not (self.show)
62
-
63
-
64
-
defcond_negative_example():
65
-
return rx.vstack(
66
-
rx.text(f"Value of state var show: {CondNegativeState.show}"),
It is also possible to make up complex conditions using the `logical or` (|) and `logical and` (&) operators.
84
-
85
-
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.
86
-
87
-
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`.
116
-
117
-
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.
153
-
154
-
Here is the python logic using `if` statements:
155
-
156
-
```python
157
-
number =0
158
-
159
-
if number >0:
160
-
print("Positive number")
161
-
162
-
elif number ==0:
163
-
print('Zero')
164
-
else:
165
-
print('Negative number')
166
-
```
167
-
168
-
This reflex code that is logically identical:
169
-
170
-
```python demo exec
171
-
import random
172
-
173
-
174
-
classNestedState(rx.State):
175
-
176
-
num: int=0
177
-
178
-
@rx.event
179
-
defchange(self):
180
-
self.num = random.randint(-10, 10)
181
-
182
-
183
-
defcond_nested_example():
184
-
return rx.vstack(
185
-
rx.button("Toggle", on_click=NestedState.change),
186
-
rx.cond(
187
-
NestedState.num >0,
188
-
rx.text(f"{NestedState.num} is Positive!", color="orange"),
189
-
rx.cond(
190
-
NestedState.num ==0,
191
-
rx.text(f"{NestedState.num} is Zero!", color="blue"),
192
-
rx.text(f"{NestedState.num} is Negative!", color="red"),
193
-
)
194
-
),
195
-
)
196
-
197
-
```
198
-
199
-
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!`.
46
+
If `show` is `True` then the first component is rendered (in this case the blue text). Otherwise the second component is rendered (in this case the red text).
200
47
201
-
The reflex code that follows is logically identical to doing the following in python:
48
+
## Conditional Props
202
49
203
-
```python
204
-
a =8
205
-
b =10
206
-
c =2
207
-
208
-
if((a>b and a>c) and (a != b and a != c)):
209
-
print(a, " is the largest!")
210
-
elif((b>a and b>c) and (b != a and b != c)):
211
-
print(b, " is the largest!")
212
-
elif((c>a and c>b) and (c != a and c != b)):
213
-
print(c, " is the largest!")
214
-
else:
215
-
print("Some of the numbers are equal!")
216
-
```
50
+
You can also set props conditionally using `rx.cond`. In this example, we set the `color` prop of a text component based on the value of the state var `show`.
`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.
260
-
261
-
```python demo exec
262
-
classCondStyleState(rx.State):
263
-
show: bool=False
264
-
img_url: str="/preview.png"
265
71
266
-
@rx.event
267
-
defchange(self):
268
-
self.show =not (self.show)
72
+
## Var Operations
269
73
74
+
You can use [var operations]({docs.vars.var_operations.path}) with the `cond` component for more complex conditions. See the full [cond reference]({library.dynamic_rendering.cond.path}) for more details.
The `rx.match` component in Reflex provides a powerful alternative to`rx.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.
79
+
The [`rx.match`]({library.dynamic_rendering.match.path}) component in Reflex provides a powerful alternative to`rx.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.
0 commit comments