allow rendering vars in foreach (#5271)

* allow rendering vars in foreach

* add test for it

Author: adhami3310

reflex/components/tags/iter_tag.py

@@ -105,8 +105,8 @@ def render_component(self) -> Component:
             The rendered component.
         """
         # Import here to avoid circular imports.
+        from reflex.compiler.compiler import _into_component_once
         from reflex.components.base.fragment import Fragment
-        from reflex.components.component import Component
         from reflex.components.core.cond import Cond
         from reflex.components.core.foreach import Foreach
 
@@ -128,11 +128,9 @@ def render_component(self) -> Component:
         if isinstance(component, (Foreach, Cond)):
             component = Fragment.create(component)
 
-        # If the component is a tuple, unpack and wrap it in a fragment.
-        if isinstance(component, tuple):
-            component = Fragment.create(*component)
+        component = _into_component_once(component)
 
-        if not isinstance(component, Component):
+        if component is None:
             raise ValueError("The render function must return a component.")
 
         # Set the component key.

tests/integration/test_var_operations.py

@@ -599,6 +599,13 @@ def index():
                 ),
                 id="foreach_list_nested",
             ),
+            rx.box(
+                rx.foreach(
+                    ArrayVar.range(0, 2),
+                    lambda x: VarOperationState.list1[x],
+                ),
+                id="foreach_list_arg2",
+            ),
             memo_comp(
                 list1=VarOperationState.list1,
                 int_var1=VarOperationState.int_var1,
@@ -950,6 +957,7 @@ def test_var_operations(driver, var_operations: AppHarness):
         ("foreach_list_arg", "1\n2"),
         ("foreach_list_ix", "1\n2"),
         ("foreach_list_nested", "1\n1\n2"),
+        ("foreach_list_arg2", "12"),
         # rx.memo component with state
         ("memo_comp", "1210"),
         ("memo_comp_nested", "345"),
@@ -992,8 +1000,10 @@ def test_var_operations(driver, var_operations: AppHarness):
     ]
 
     for tag, expected in tests:
-        print(tag)
-        assert driver.find_element(By.ID, tag).text == expected
+        existing = driver.find_element(By.ID, tag).text
+        assert existing == expected, (
+            f"Failed on {tag}, expected {expected} but got {existing}"
+        )
 
     # Highlight component with var query (does not plumb ID)
     assert driver.find_element(By.TAG_NAME, "mark").text == "second"