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.

The function can also take an index as a second argument.

Nested foreach components can be used to render nested lists.

When indexing into a nested list, it's important to declare the list's type as Reflex requires it for type checking. This ensures that any potential frontend JS errors are caught before the user can encounter them.

Below is a more complex example of foreach within a todo list.

Items in a dictionary can be accessed as list of key-value pairs. Using the color example, we can slightly modify the code to use dicts as shown below.

Now let's show a more complex example with dicts using the color example. Assuming we want to display a dictionary of secondary colors as keys and their constituent primary colors as values, we can modify the code as below: