[Bug]: key prop missing on generated source code

[brynshanahan]

Describe the bug

Children are missing their key prop in the Canvas DocBlock. The key is an important part of the component's api

To Reproduce

// Accordion.stories.tsx
export default {
    title: 'Components/Accordion',
    component: Accordion,
    id: 'next-accordion',
}

export const ExpandByDefault = {
    component: Accordion,
    args: {
        defaultExpandedKeys: ['accordion2'],
        children: [
            <AccordionItem key='accordion1' title='Accordion 1'>
                <p>Accordion 1.</p>

                <p>More content.</p>
            </AccordionItem>,
            <AccordionItem key='accordion2' title='Accordion 2'>
                <p>Accordion 2.</p>

                <p>More content.</p>
            </AccordionItem>,
        ],
    },
}

// Accordion.mdx
<Canvas of={stories.ExpandedByDefault} />

System

System:
    OS: macOS 13.3.1
    CPU: (10) x64 Apple M1 Pro
    Shell: 3.2.57 - /bin/sh
  Binaries:
    Node: 16.19.0 - /usr/local/bin/node
    Yarn: 3.4.1 - /usr/local/bin/yarn <----- active
    npm: 8.19.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 118.0.5993.88
    Safari: 16.4

Additional context

No response

[shilman]

We're generating the source snippets with https://github.com/algolia/react-element-to-jsx-string#readme. My guess is that it's either a bug there, or the key information is simply unavailable once the code is rendered into JSX elements. More investigation needed!

[suneel00]

Hi @brynshanahan I attempted to utilize the eventKey property for the React-Bootstrap AccordionItem instead of the key property.

[DanielHara]

Hi there! Yes, I'm also experiencing this issue and it looks like the bug comes from https://github.com/algolia/react-element-to-jsx-string/issues/301, and I've opened a PR there to fix it.