The playground component seems to affect the child component type

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

[tsnolan23]

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

PropTypes.instanceOf(Component)

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

[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