code-connect icon indicating copy to clipboard operation
code-connect copied to clipboard

Issue handling function passed as children in React components

Open atimofte-mdsol opened this issue 2 months ago • 0 comments

Please provide:

  • Code Connect CLI version: 1.3.6
  • Operating system: macOS Sequoia 15.0
  • Code Connect file, Figma design and/or relevant code snippet that could help us get more context:

I have a React component where I’m using an arrow function as children to pass click events and other attributes down to a slot node (in this case, a Button):

<DropdownMenu.Trigger>
    {(attributes) => <Button attributes={attributes}>Open</Button>}
</DropdownMenu.Trigger>

However, when I try to connect it using Code Connect, the API doesn’t seem to handle a function passed as children for DropdownMenu.Trigger.

Here’s my setup:

figma.connect(
	DropdownMenu.Trigger,
	"https://www.figma.com/design/...,
	{
		imports: ["import { DropdownMenu } from '@library'"],
		props: {
			children: figma.children("*"),
		},
		example: ({ children }) => <DropdownMenu.Trigger>{(attributes) => children}</DropdownMenu.Trigger>,
	}
);

Result:

Image

Additionally, how can we pass the attributes parameter down to whatever component is rendered inside the slot?

Thank you!

atimofte-mdsol avatar Oct 23 '25 13:10 atimofte-mdsol