Skip to content

Remove Fragment wrapper from foreach output to support iterable children in components like carousels#5249

Closed
ppspps824 wants to merge 1 commit intoreflex-dev:mainfrom
ppspps824:fix/ppspps824/remove-fragment
Closed

Remove Fragment wrapper from foreach output to support iterable children in components like carousels#5249
ppspps824 wants to merge 1 commit intoreflex-dev:mainfrom
ppspps824:fix/ppspps824/remove-fragment

Conversation

@ppspps824
Copy link
Copy Markdown

All Submissions:


Type of change

  • Bug fix (non-breaking change which fixes an issue)

New Feature Submission:

  • Does your submission pass the tests?
  • Have you linted your code locally prior to submission?

Changes To Core Features:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your core changes, as applicable?
  • Have you successfully ran tests with your changes locally?

Description

This PR modifies the code generation logic for the foreach function in Reflex. Previously, elements generated by foreach were wrapped in a React Fragment (<>...</>), which breaks compatibility with components like react-multi-carousel or react-responsive-carousel that expect a flat iterable of children elements.

This change removes the Fragment wrapper in these cases, allowing iterable children to be passed correctly.


Related Issue

Closes #5248

@adhami3310
Copy link
Copy Markdown
Member

we added those for a reason: #3877

but the jsx PR: #5127 should fix both of those issues (i'm hoping)

@codspeed-hq
Copy link
Copy Markdown

codspeed-hq bot commented May 2, 2025

CodSpeed Performance Report

Merging #5249 will not alter performance

Comparing ppspps824:fix/ppspps824/remove-fragment (29a33aa) with main (54b3bf1)

Summary

✅ 8 untouched benchmarks

@ppspps824
Copy link
Copy Markdown
Author

Thank you.I will close this issue as I support your PR.

@ppspps824 ppspps824 closed this May 2, 2025
@ppspps824 ppspps824 deleted the fix/ppspps824/remove-fragment branch May 2, 2025 23:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Passing an object created with foreach to a React component that handles iterable elements does not work.

2 participants