Fix "Uncaught TypeError: Cannot read property 'classList' of null"

[luontola]

This is a fix for issue #208

This fix has also been published at https://www.npmjs.com/package/@luontola/react-transition-group as 2.3.0-patch.3

[jquense]

I'm not sure this is enough to solve the problem. When is the node not available? this will leave the component in a bad state if it had to do anything else, does this situation mean the component is already unmounted?

[luontola]

Our use case is that we have complex forms where form fields are dynamically added and removed based on the values of other form fields. They are rendered like this:

<TransitionGroup>
  {fields.map(field =>
    <CSSTransition {...transitionProps}>
      {field}
    </CSSTransition>)}
</TransitionGroup>

The rendering of some of those fields also has many conditionals, including rendering the field as null:

const SomeField = ({someProp}) => {
  if (someProp === 'foo') {
    return <div>...</div>;
  }
  if (someProp === 'bar') {
    return <div>...</div>;
  }
  return null;
};

As a result, sometimes CSSTransition's child component will have no DOM node. This used to work fine with react-transition-group v1.2.0, but with v2.2.1 it causes the crash mentioned in issue #208.

[jquense]

ok, so much concern here is that this effectively skips an animation, but doesn't clean up the state. So now you'd have the Transition Component props saying it's entered, but its internal state still saying it's exited.

I think this need to handled in CSSTranstion, which uses the DOM node as opposed to here which is mostly DOM agnostic. Said another way, i think transitioning a component where the DOM node is null is a valid use case, it should be handled up one level in CSSTransition where it's not a valid case

[luontola]

Yes, handling it inside CSSTransition sounds best. My first attempt was to add null checks to addClass and removeClass in CSSTransition.js, but those two places were not enough, so I backed out before going too deep into that rabbit hole.

[jquense]

it should be eneough to return early from all of the onFoo hooks there

[luontola]

Here is an updated PR, which only modifies CSSTransition and also adds a test for the bug.

[jquense]

thanks!

[jpfiorilla]

solved the issue for me, thanks a bunch

[mreishus]

is there going to be a new release of react-transition-group that includes this fix?