fix[gen2-sdks]: add keys for Fragment inside Accordion JSX loop #3725
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR adds the
key
attribute inside the Accordion component. This attribute is required by React's use of loops in JSX code, and will throw an error when the top-level children in a loop are missing this attribute.From the TypeScript handbook on
JSX.IntrinsicAttributes
:Additional concerns
Although this is more a situation exclusively about Mitosis, I wanted to, at least, mention it here.
I'd argue that the
key
attribute, being intrinsic to React's use of JSX, should be managed accordingly inside Mitosis heuristics in order to avoid polluting the Mitosis JSX markup with references to specific transpiler back-ends. Moreover, how could we do the same we're doing in this commit if we were to use Sveltosis instead?For this reason, I want to propose considering this a temporary fix and solve the problem in the right context, which would be Mitosis handling of key attributes in loops.