How to use key in Carousel item?

[baseplate-admin]

Hi i have this react component

<Carousel.ItemGroup>
    {instances.map((instance, i) => (
        <Carousel.Item
            key={i}
            index={i}
         >
          {/* Something else */}
         </Carousel.Item>
    ))}
</Carousel.ItemGroup>

It raises an weird issue?

A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, data-scope: ..., data-part: ..., id: ..., dir: ..., role: ..., data-index: ..., data-inview: ..., aria-roledescription: ..., data-orientation: ..., aria-label: ..., aria-hidden: ..., style: ..., className: ..., children: ...};
  <div {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {data-scope: ..., data-part: ..., id: ..., dir: ..., role: ..., data-index: ..., data-inview: ..., aria-roledescription: ..., data-orientation: ..., aria-label: ..., aria-hidden: ..., style: ..., className: ..., children: ...};
  <div key={someKey} {...props} />

While the functionality is not affected, i want something a bit more permanent solution to this. Thank you

[endigo9740]

@baseplate-admin two things:

1. Can you confirm you're running the latest version of the Skeleton component package (4.15.1). The carousel specifically was a feature that was previously in a beta state and only recently moved to a production version. And with this came a number of bugfixes.
2. If updating doesn't help, Can you create a minimal reproduction using the Zag primitive directly. Just scaffold this in a new minimal app using your tech stack of choice: https://zagjs.com/components/react/carousel

The ideas here is we need to confirm if this issue is specific to Skeleton's implementation - or what I'm assuming is happening - it's upstream on Zag's end. So as long as you're running the latest version of the component, and the issue persists, this will need to be reported upstream to Zag if you wish to see it resolved.

To put this another way, since Skeleton v3, all components are essentially just layering on the Skeleton design system on top of the Zag functional component primitives. So if there's a bug in the component primitive, most of the time the issue and fix will need to come from Zag.

If you can identify this happening in the raw primitive, then let us know here, and report the issue to Zag:
https://github.com/chakra-ui/zag

[baseplate-admin]

what I'm assuming is happening - it's upstream on Zag's end

I fear this is the case too.

If updating doesn't help, Can you create a minimal reproduction using the Zag primitive directly. Just scaffold this in a new minimal app using your tech stack of choice: https://zagjs.com/components/react/carousel

Give me some time regarding this please. Currently overwhelmed with academics.

[baseplate-admin]

Fyi, the issue exists in all skeleton components.

[SkeletonAdmin]

@baseplate-admin totally understand. If you would like, I can convert this to a standard Github issue and we can follow up as time allows. But if you're seeing this for all components, that like points towards a Zag issue, or newly introduced Zag issue, as we've only been maintaining Zag peer dependencies recently. I can't promise when we can follow up, given our attention on v5 right now.

The good news is there's a fix available, we'll include it asap. As of Monday this week we're on a release freeze aside from emergency breaking issues. So any updates will come as part our first v5 pre-release. Keep that in mind. Kinda bad timing unfortunately :/

[baseplate-admin]

I have always been a big fan of @endigo9740 's work, feel free to follow up as you like :)