Docz: The playground component seems to affect the child component type

[tsnolan23]

Bug Report

When using the <Playground> component, you cannot check the type of the children within the component.

For example, say I have two components - Chip and ChipCloud. If in the render method of the ChipCloud you have something like:

// import the chip class for checking
import Chip from '../Chip'

// in the render method
React.Children.map(this.props.children, child => {
    if(child.type === Chip) {
        return React.cloneElement(child, {
            theme: this.props.theme 
        })
    } else {
        return child
    }
})

Basically, my use case is that if a Chip is the child of a ChipCloud, the ChipCloud can override certain props IF the child is a Chip and other children that aren't of the Chip type should be rendered as usual.

The line if(child.type === Chip) does not work when run within the Playground component. Not sure if it modifies the type of its children during render or clones them or what, but it affects that check.

Here is a link to a repo where the above works as expected:

https://codesandbox.io/s/mjp6zzwxjj

Expected behavior

The Playground component should affect the type of the children during render. I would expect that the same behavior in the example above occur in the Playground component.

Enviroment

• OS: Windows 10
• Node/npm version: v8.9.3 / v5.5.1

[pedronauck]

Sorry buddy, but the <Playground> does nothing with the children components. Can you tell me more about your error? What's happening most specifically?

[tsnolan23]

@pedronauck Thanks for the response. Not saying it was directly related to the Playground component. More just describing the behavior I was seeing. It could be based on how it's compiled, too.

More specifically if I'm running the following line within my application, it returns true:

if(child.type === Chip)

When that line is executed within Docz, it returns false

I'll create an isolated example with docz included to reproduce the issue.

[pedronauck]

Good, when it's done show the repository that I can help you with that 🙏

[tsnolan23]

@pedronauck Here is the reproducible example!

https://github.com/tsnolan23/docz-children-type-issue

Let me know if you have any questions with where the issue is or how it's set up

[pedronauck]

@tsnolan23 I tried here checking prototype instead of child.type directly and it worked. I did something like that:

{React.Children.map(children, child => {
  const isPrototype = Chip.prototype.isPrototypeOf(child.type.prototype)

  if (child && isPrototype) {
    return React.cloneElement(child, {
      theme: theme || child.props.theme
    })
  } else {
    return child
  }
})}

What you think about it?

[tsnolan23]

Interesting. I still think it's strange that it wouldn't work as is. Most of the posts about type checking children involve the way I've got it currently implemented.

https://discuss.reactjs.org/t/how-to-determine-what-type-of-component-a-child-is/3951/2
https://stackoverflow.com/questions/27366077/only-allow-children-of-a-specific-type-in-a-react-component

I know those are just people's opinions as well, just curious why it wouldn't work in the Docz implementation but does otherwise.

I'll explore using an alternative type checking method.

[tsnolan23]

Granted, the official prop-types docs show usage of:

PropTypes.instanceOf(Component)

https://github.com/facebook/prop-types/blob/master/README.md#usage