CSSTransitionGroup demo not working with react-lazyload@2.0

I was trying to get the CSSTransitionDemo working as shown here https://jasonslyvia.github.io/react-lazyload/examples/#/fadein

For some reason, although there were no errors, the images would not actually fade in, but would still just “pop in”.

I thought upgrading to v2.0 of react-lazyload might help but instead it showed an error in the console.

Here is my code

<LazyLoad height={233} throttle={300} once>
  <CSSTransitionGroup key="1"
    transitionName="fade"
    transitionAppear
    transitionAppearTimeout={500}
    transitionEnter={false}
    transitionLeave={false}>
    { Card.generateImage(this.props.imgSource, this.props.imgAlt) }
  </CSSTransitionGroup>
</LazyLoad>

Here is the error I am seeing in the browser

6warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `Card`.
    in Card (created by EventsList)
    in div (created by EventsList)
    in div (created by EventsList)
    in div (created by EventsList)
    in EventsList (created by NavigationBar)
    in div (created by NavigationBar)
    in div (created by TabPane)
    in Transition (created by Fade)
    in Fade (created by TabPane)
    in TabPane (created by Tab)
    in Tab (created by NavigationBar)
    in div (created by TabContent)
    in TabContent (created by Tabs)
    in div (created by Tabs)
    in TabContainer (created by Tabs)
    in Tabs (created by Uncontrolled(Tabs))
    in Uncontrolled(Tabs) (created by NavigationBar)
    in div (created by NavigationBar)
    in div (created by NavigationBar)
    in NavigationBar (created by Home)
    in div (created by Home)
    in Home (created by Bootstrap)
    in div (created by Bootstrap)
    in Bootstrap

Thanks for this great package, the <LazyLoad> component is working quite well for!

[fabioimpe]

faced the same issue even after the migration guide of react-transition-group, no errors on console but the image just pop in as thescientist13 reported

[alextouzel]

Sure. I made a sandbox demonstrating the issue.

In the sandbox, click the button twice to see the problem with the animation. Then, you can go to “ViewWithLazyLoad.js” and comment out the LazyLoad component. Run the animation again and everything should be fine.