Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
SimonCheung1989 opened this issue May 29, 2017 · 4 comments

Comments

@SimonCheung1989
Copy link

@SimonCheung1989 SimonCheung1989 commented May 29, 2017

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**

![image](https://cloud.githubusercontent.com/assets/12840387/26545546/91d55f64-4498-11e7-8dfd-ebd4f383b0c0.png)

**Failed in IE browser**

![image](https://cloud.githubusercontent.com/assets/12840387/26545680/1c07cd48-4499-11e7-9a5e-ffe19013e6fa.png)



@SimonCheung1989

This comment has been minimized.

Copy link
Author

@SimonCheung1989 SimonCheung1989 commented May 29, 2017

Success in Chrome browser
image

@SimonCheung1989

This comment has been minimized.

Copy link
Author

@SimonCheung1989 SimonCheung1989 commented May 29, 2017

Failed in IE browser
image

@nhunzaker

This comment has been minimized.

Copy link
Collaborator

@nhunzaker nhunzaker commented May 29, 2017

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/

screen shot 2017-05-29 at 7 47 23 am

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

This comment has been minimized.

Copy link
Member

@aweary aweary commented May 29, 2017

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!

@aweary aweary closed this May 29, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.