CSSTransitionGroup throws when a child returns null from render

[johanneslumpe]

I came across this, when using react-router. When loading a route initially where the route handler is actually inside a ReactCSSTransitionGroup and then removing it from the transition group leads to an Uncaught TypeError: Cannot read property 'addEventListener' of null. The weird thing is that it only happens on initial load of a nested route, not when the same view is being pulled up via the menu. I'm not sure if this is an issue related react-router or if it belongs to react. But the thing is that the RouteHandler component either returns a react element, or it returns null. It seems like an edge case maybe, because it only happens in this specific initial render setup.

It could be fixed, by adding a guard to the transition() method of ReactCSSTransitionGroupChild:

if (!node) {
  finishCallback && finishCallback();
  return;
}

[sophiebits]

This was probably fixed by #2503.

[gaearon]

I don't think this is solved.

It's easy to reproduce with React 0.12.2: just have the child return null from render. It's rather frustrating because some other developer may change the animated component to return null when data is not ready, and not realize that this breaks the case when that component is inside the transition group.

[joshthecoder]

Yup ran into this as well. If you pass a component to ReactCSSTransitionGroup that renders null you get this exception. Using React 0.12.1

[gaearon]

@spicyj Can you please reopen?

[jarvanxing]

i've get the same exception, too. Hope this will be fixed soon.

[johanneslumpe]

@spicyj is there anything stopping you people from implementing the suggested fix? :)

[felixakiragreen]

I'm encountering a similar issue.

[gaearon]

is there anything stopping you people from implementing the suggested fix? :)

I guess a PR would be welcome?

[johanneslumpe]

@gaearon yeah, there is is!

[digitalmaster]

I'm still seeing this issue. And can verify that it only happens when I return null.

React with addons v0.13.3

[sophiebits]

Yes, the fix is in 0.14.

[digitalmaster]

Ahh.. well that would explain things.

How can I get my hands on 0.14?

[sophiebits]

Sorry – not released yet, but hopefully in the next few weeks. 0.14-beta is on npm (see the React blog).