diff --git a/integration/test_var_operations.py b/integration/test_var_operations.py index bd9db2d8a..2feb80ae0 100644 --- a/integration/test_var_operations.py +++ b/integration/test_var_operations.py @@ -593,6 +593,16 @@ def VarOperations(): int_var2=VarOperationState.int_var2, id="memo_comp_nested", ), + # foreach in a match + rx.box( + rx.match( + VarOperationState.list3.length(), + (0, rx.text("No choices")), + (1, rx.text("One choice")), + rx.foreach(VarOperationState.list3, lambda choice: rx.text(choice)), + ), + id="foreach_in_match", + ), ) @@ -790,6 +800,8 @@ def test_var_operations(driver, var_operations: AppHarness): # rx.memo component with state ("memo_comp", "1210"), ("memo_comp_nested", "345"), + # foreach in a match + ("foreach_in_match", "first\nsecond\nthird"), ] for tag, expected in tests: diff --git a/reflex/.templates/jinja/web/pages/utils.js.jinja2 b/reflex/.templates/jinja/web/pages/utils.js.jinja2 index 8e9808fbb..4e3546070 100644 --- a/reflex/.templates/jinja/web/pages/utils.js.jinja2 +++ b/reflex/.templates/jinja/web/pages/utils.js.jinja2 @@ -64,11 +64,11 @@ {# Args: #} {# component: component dictionary #} {% macro render_iterable_tag(component) %} -{ {%- if component.iterable_type == 'dict' -%}Object.entries({{- component.iterable_state }}){%- else -%}{{- component.iterable_state }}{%- endif -%}.map(({{ component.arg_name }}, {{ component.arg_index }}) => ( +<>{ {%- if component.iterable_type == 'dict' -%}Object.entries({{- component.iterable_state }}){%- else -%}{{- component.iterable_state }}{%- endif -%}.map(({{ component.arg_name }}, {{ component.arg_index }}) => ( {% for child in component.children %} {{ render(child) }} {% endfor %} -))} +))} {%- endmacro %}