CSSTransitionGroup shows many <Unknown> layers

[seanadkinson]

Not sure if this is an issue with the React transition add-on not setting displayName properly, but when using the CSSTransitionGroup, the React Dev Tools shows many layers of <Unknown> elements.

Note, I've just plugged in the example TodoList app from the docs

Code:

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var TodoList = React.createClass({
    getInitialState: function() {
        return {items: ['hello', 'world', 'click', 'me']};
    },
    handleAdd: function() {
        var newItems =
            this.state.items.concat([prompt('Enter some text')]);
        this.setState({items: newItems});
    },
    handleRemove: function(i) {
        var newItems = this.state.items;
        newItems.splice(i, 1);
        this.setState({items: newItems});
    },
    render: function() {
        var items = this.state.items.map(function(item, i) {
            return (
                <div key={item} onClick={this.handleRemove.bind(this, i)}>
                    {item}
                </div>
            );
        }.bind(this));
        return (
            <div>
                <button onClick={this.handleAdd}>Add Item</button>
                <ReactCSSTransitionGroup transitionName="example">
                    {items}
                </ReactCSSTransitionGroup>
            </div>
        );
    }
});

Elements Tab:

React Tab:

Would be nice to just show the CSSTransitionGroup wrapper.

[sophiebits]

Not really a devtools problem – each of those Unknown components is in fact a separate component; the problem is that we're missing displayName on those classes in the React repo.

[seanadkinson]

Was wondering if that was the issue, thanks for the info. It could be nice, though, for the devtools to recognize it is visiting a Transition component, and skip a couple levels of components, just showing <Transition> or whatnot. I can understand the challenges programmatically speaking, though.

[sophiebits]

I think it's probably more valuable for the devtools to always show the actual component structure.

[zpao]

Going to close this out since it's not actually a devtools issue. We'll get the React fix in. Thanks for reporting!