Reflex Cloud - Fast, secure & scalable hosting. One command to deploy.

Rendering Iterables

Recall again from the basics that we cannot use Python for loops when referencing state vars in Reflex. Instead, use the rx.foreach component to render components from a collection of data.

Here's the same example using a lambda function.

You can also use lambda functions directly with components without defining a separate function.

In this first simple example we iterate through a list of colors and render a dynamic number of buttons.

The first argument of the rx.foreach function is the state var that you want to iterate through. The second argument is a function that takes in an item from the data and returns a component. In this case, the colored_box function takes in a color and returns a button with that color.

For vs Foreach

Regualar For Loop

* Use when iterating over constants.

Foreach

* Use when iterating over state vars.

Regualar For Loop

* Use when iterating over constants.

Foreach

* Use when iterating over state vars.

The above example could have been written using a regular Python for loop, since the data is constant.

However, as soon as you need the data to be dynamic, you must use rx.foreach.

Render Function

The function to render each item can be defined either as a separate function or as a lambda function. In the example below, we define the function colored_box separately and pass it to the rx.foreach function.

Notice that the type annotation for the color parameter in the colored_box function is rx.Var[str] (rather than just str). This is because the rx.foreach function passes the item as a Var object, which is a wrapper around the actual value. This is what allows us to compile the frontend without knowing the actual value of the state var (which is only known at runtime).

Enumerating Iterables

The function can also take an index as a second argument, meaning that we can enumerate through data as shown in the example below.

Here's the same example using a lambda function.

Iterating Dictionaries

We can iterate through a dict using a foreach. When the dict is passed through to the function that renders each item, it is presented as a list of key-value pairs [("sky", "blue"), ("balloon", "red"), ("grass", "green")].

sky

balloon

grass

Nested examples

rx.foreach can be used with nested state vars. Here we use nested foreach components to render the nested state vars. The rx.foreach(project["technologies"], get_badge) inside of the project_item function, renders the dict values which are of type list. The rx.box(rx.foreach(NestedStateFE.projects, project_item)) inside of the projects_example function renders each dict inside of the overall state var projects.

Next.jsPrismaTailwindGoogle CloudDockerMySQL
PythonFlaskGoogle CloudDocker

If you want an example where not all of the values in the dict are the same type then check out the example on var operations using foreach.

Here is a further example of how to use foreach with a nested data structure.

purple

red

blue

orange

yellow

red

green

blue

yellow

Foreach with Cond

We can also use foreach with the cond component.

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 use the foreach to iterate over all of the items in the to_do_list using the render_item function.

Sammy's Packing List

  • Space suit ✔
  • Helmet ✔
  • Back Pack