Type property missing for ReactElement class in IE 11

[jash-cool]

I found the below bug while debugging on IE 11.

Current Behavior: Type property missing for ReactElement class in IE 11. It is present in all other browsers including Edge.

Expected Behavior: Type property should be present.

React Version: 15.0.1, Browser: IE 11, OS: Windows 10

ReactElement which has the issue

interface ReactElement<P> {
        type: string | ComponentClass<P> | SFC<P>;
        props: P;
        key?: Key;
    }

Sample Test Code:

React.Children.map(this.props.children, (child, index) => {
           console.log((child as any).type); // returns undefined only for IE 11.

            if (child && (child as any).type.name === "ReactCompenetName") {
            }
        });

[aweary]

Thanks for the report @jash-cool. I'm not able to reproduce this in IE 11

I tested with both 15.0.1 and the latest release (15.4.1). Can you share a full test case reproducing the issue? If you upgrade to the latest release in your project, does it resolve the issue?

[jash-cool]

In my case the child components are actually ReactComponents, and when i check for child.type it gives undefined. E.g. is i have a react component class name 'MyComponent' and this component is wrapped inside another react class. I expect to see 'MyComponent' value when i check for child.type.

Sample Code:

var ReactFoo = React.createClass({
  render: function() {
    return (
    <p>
      something
    </p>
    )
  }
});

var Hello = React.createClass({
  render: function() {
    return (
    <div>
      {React.Children.map(this.props.children, (child, index) => {
         console.log(child.type);
         return child;
      })}
    </div>
    )
  }
});

ReactDOM.render(
  (
    <Hello>
        <ReactFoo/>
      <Bar/>
    </Hello>
  ),
  document.getElementById('container')
);

In the above code, for children 'ReactFoo' I expect the type to be as 'ReactFoo'.

But yeah, i can see 'something' returned even in chrome for my sample code, which is strange.

In my real code, i am using Typescript, could that make a difference?

[aweary]

In my case the child components are actually ReactComponents, and when i check for child.type it gives undefined. E.g. is i have a react component class name 'MyComponent' and this component is wrapped inside another react class. I expect to see 'MyComponent' value when i check for child.type.

I get the same results whether I use a functional component, or createClass: https://jsfiddle.net/osrhoj55/

In the above code, for children 'ReactFoo' I expect the type to be as 'ReactFoo'.

type will only be a string when the element is an HTML tag, like span or foo. When the element is a component, type will reference the function or class used to construct the element.

https://facebook.github.io/react/docs/react-api.html#createelement

In my real code, i am using Typescript, could that make a difference?

It could yes, you might want to inspect the compiled JavaScript to see if there may be an issue with how TypeScript is building your app.

[jash-cool]

Looks there are some issue with typescript. Closing this issue as not related to react.

[aweary]

Thanks for the follow up!

[anthonymuau]

This does not look like typescript issue as it's happening with flow too.