How to render complex components in Playground

Question

Hello, I would like to pass some variables to my components and use it inside <Playground> element as in the sample from https://github.com/pedronauck/docz/blob/master/examples/basic/src/components/Alert.mdx#L37

So in my case I have:

<Playground>
{() => {
     const subprojects = []
     return <Project label="SomeLabel" projects="{subprojects}" />
  }}
</Playground>

But this just renders as:

These are my devDepedencies:

"docz": "^0.5.8",
"docz-plugin-css": "^0.5.7",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"react-test-renderer": "^16.4.1",
"typescript": "^2.9.2"

[mAAdhaTTah]

@angel-git This is a bug in your JSX:

return <Project label="SomeLabel" projects="{someVar}" />

// should be....
return <Project label="SomeLabel" projects={someVar} />

then "" around {someVar} makes it get passed in as a string, rather than the value.

[angel-git]

ahhh how retarded I’m! thanks!