Rendering Iterables

You will often want to display multiple similar components from a collection of data. The rx.foreach component takes an iterable (list, tuple or dict) and a function that renders each item in the list. This is useful for dynamically rendering a list of items defined in a state.

In this first simple example we iterate through a list of colors and render the name of the color and use this color as the background for that rx.box. As we can see we have a function colored_box that we pass to the rx.foreach component. This function renders each item from the list that we have defined as a state var color.

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

We can iterate through a dict data structure 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")].

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.

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.

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.