React-devtools: Unknown component?

[josebalius]

Hey guys,

This issue is in reference to: https://github.com/josebalius/ngReactGrid/issues/1

The chrome extension seems to show Unknown for those React components that are defined the following way:

var myComponent = (function() {
    var anotherComponent = React.createClass({
        render: function() {
            return <div>Here</div>
        }
    });

    return React.createClass({
        render: function() {
            return <anotherComponent />
        }
    });
})();

Use myComponent anywhere else, and chrome react will show Unknown. I was thinking of changing my code but I wanted to double check with you guys that we shouldn't we defining components that way or maybe it is okay but you guys need to account for it.

Let me know, thanks!

Jose

[vjeux]

You can add displayName: 'myComponent' inside of the second property to see it in the dev tools.

When you use JSX, we transform

var anotherComponent = React.createClass({

into

var anotherComponent = React.createClass({displayName: 'anotherComponent',

behind the scenes.

We don't currently infer the construct

var myComponent = (function() {
  return React.createClass({ /* ... */ })
})();

If it becomes a common pattern we could do it

[josebalius]

Thanks @vjeux that did the trick.

Jose

[vjeux]

Yay! Great work on ngReactGrid btw :)

[josebalius]

@vjeux Thanks! I'm happy with the outcome (especially performance), and I continue to enjoy working with React the more functionality I add. It's too easy I tell ya!

[kylesuss]

Came here after reading the tutorial on the react site. I am not using JSX and the site did not show the displayName attribute being set in the translation. They _do_ have it in the updated docs on master though, so it would seem as though the site has not yet been updated.

[sophiebits]

We'll update the site in the next few days.