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.

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.

All of the comparison operators are used as expected in python. These include ==, !=, >, >=, <, <=.

There are operators to add two vars +, subtract two vars -, multiply two vars * and raise a var to a power pow().

The operator / represents true division. The operator // represents floor division. The operator % represents the remainder of the division.

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

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.

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.

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.