I'm trying to add animations for enter into my list inside React.js app (.html).

But ReactCSSTransitionGroup throws such exceptions:

Uncaught TypeError: Cannot read property '_mockedReactClassConstructor' of undefined

together with warnings:

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for posite ponents). warning.js:36

Warning: Only functions or strings can be mounted as React ponents.

My ponent looks like:

var List = React.createClass({
  render: function () {
    var items = this.props.data
        .filter(function (item) {
            return item.stream;
        })
        .map(function (item) {
            return <div key={item.id}>item.name</div>;
        });

      return (
        <div className="list clearfix">
            <ReactCSSTransitionGroup transitionName="example">
                {items}
            </ReactCSSTransitionGroup>
        </div>
     );
  }
});

I'm trying to add animations for enter into my list inside React.js app (http://facebook.github.io/react/docs/animation.html).

But ReactCSSTransitionGroup throws such exceptions:

Uncaught TypeError: Cannot read property '_mockedReactClassConstructor' of undefined

together with warnings:

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for posite ponents). warning.js:36

Warning: Only functions or strings can be mounted as React ponents.

My ponent looks like:

var List = React.createClass({
  render: function () {
    var items = this.props.data
        .filter(function (item) {
            return item.stream;
        })
        .map(function (item) {
            return <div key={item.id}>item.name</div>;
        });

      return (
        <div className="list clearfix">
            <ReactCSSTransitionGroup transitionName="example">
                {items}
            </ReactCSSTransitionGroup>
        </div>
     );
  }
});

• javascript
• animation
• css-transitions
• reactjs
• reactcsstransitiongroup

• Could you please provide more data? Can you create a test-case on jsfiddle? – Johannes Lumpe Commented Jan 13, 2015 at 10:22
• this one - jsfiddle/r98d348f/3 works fine until you'll wrap {items} into ReactCSSTransitionGroup.. – Kosmetika Commented Jan 13, 2015 at 10:34

1 Answer 1

Since the original answer was based on the assumption that the above code was correct, here the revised one, based on your fiddle.

In your fiddle you do not propery reference the ReactCSSTransitionGroup. You reference it as React.ReactCSSTransitionGroup, which of course is undefined. This is why your fiddle will plain, if you try to wrap anything in it, because you are using an undefined value. To get your fiddle working, you will have to reference the css transition group like this:

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

The corrected fiddle: http://jsfiddle/r98d348f/4/