Var operations transform the placeholder representation of the value on the
frontend and provide a way to perform basic operations on the Var without having
to define a computed var.
Within your frontend components, you cannot use arbitrary Python functions on
the state vars. For example, the following code will not work.
This is because we compile the frontend to Javascript, but the value of State.number
is only known at runtime.
In this example below we use a var operation to concatenate a string with a var, meaning we do not have to do in within state as a computed var.
Var operations allow us to change vars on the front-end without having to create more computed vars on the back-end in the state.
Some simple examples are the == var operator, which is used to check if two vars are equal and the to_string() var operator, which is used to convert a var to a string.
"Banana"is my favorite fruit!
The selected fruit is not equal to the favorite fruit.
The - operator is used to get the negative version of the var. The abs() operator is used to get the absolute value of the var. The .length() operator is used to get the length of a list var.
In Reflex the & operator represents the logical AND when used in the front end. This means that it returns true only when both conditions are true simultaneously.
The | operator represents the logical OR when used in the front end. This means that it returns true when either one or both conditions are true.
The ~ operator is used to invert a var. It is used on a var of type bool and is equivalent to the not operator.
The 'in' operator is not supported for Var types, we must use the Var.contains() instead. When we use contains, the var must be of type: dict, list, tuple or str.
contains checks if a var contains the object that we pass to it as an argument.
We use the reverse operation to reverse a list var. The var must be of type list.
Finally we use the join operation to join a list var into a string.
The lower operator converts a string var to lowercase. The upper operator converts a string var to uppercase. The split operator splits a string var into a list.
Indexing is only supported for strings, lists, tuples, dicts, and dataframes. To index into a state var strict type annotations are required.
In the code above you would expect to index into the first index of the list_1 state var. In fact the code above throws the error: Invalid var passed for prop value, expected type <class 'int'>, got value of type typing.Any. This is because the type of the items inside the list have not been clearly defined in the state. To fix this you change the list_1 definition to list_1: list[int] = [50, 10, 20]
Errors frequently occur when using indexing and foreach.
The code above throws the error TypeError: Could not foreach over var of type Any. (If you are trying to foreach over a state var, add a type annotation to the var.)
We must change projects: list[dict] => projects: list[dict[str, list]] because while projects is annotated, the item in project["technologies"] is not.
Next.jsPrismaTailwindGoogle CloudDockerMySQL
PythonFlaskGoogle CloudDocker
The previous example had only a single type for each of the dictionaries keys and values. For complex multi-type data, you need to use a dataclass, as shown below.
Ariana Grande
30
arianagrande.com
https://es.wikipedia.org/wiki/Ariana_Grande
Gal Gadot
38
http://www.galgadot.com/
https://es.wikipedia.org/wiki/Gal_Gadot
Setting the type of actresses to be actresses: list[dict[str,str]] would fail as it cannot be understood that the value for the pages key is actually a list.
You can also combine multiple var operations together, as seen in the next example.
The number is 0
Even
Update
We could have made a computed var that returns the parity of number, but
it can be simpler just to use a var operation instead.
Var operations may be generally chained to make compound expressions, however
some complex transformations not supported by var operations must use computed vars
to calculate the value on the backend.