React: React.Children.map(children, (child, index) => but got child.type.name is undefined on IE browser

[SimonCheung1989]

as title, i want to get child element's tag name,

    ```
    const { children, theme } = this.props;
    const { open } = this.state;

    let summary = null;
    const otherChildren = [];
    React.Children.map(children, (child, index) => {
        if (child.type) {
            console.log(`child type.name: ${child.type.name} `);
        }
        if (child.type && child.type.name === 'Summary') {
            summary = cloneElement(child, {
                children: child.props.children,
                handleClick: this.handleClick,
                handleKeyPress: this.handleKeyPress,
                theme: child.props.theme
            });
        } else {
            otherChildren.push(child);
        }
    });

```
Success in Chrome browser

Failed in IE browser

[SimonCheung1989]

Success in Chrome browser

[SimonCheung1989]

Failed in IE browser

[nhunzaker]

Hey @SimonCheung1989 It's possible that this is failing because this.type references the constructor function for the component. function.name isn't supported in IE, only Edge+:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name

So, taking this example:

https://jsfiddle.net/84v837e9/

type here is a reference to the component constructor. So if you do child.type.name, it references the name property on the constructor -- no supported in IE.

[aweary]

Sounds like that's the problem. If you control the components that are being rendered as children you can get around this by using a static property like displayName instead of relying on the environment to provide the name for you.

Summary.displayName = "Summary"

Then you can check for child.type.displayName instead!

Since this is just an aspect of the environment that React can't really control, I'm going to close this out, but hopefully, that workaround helps!