From 9cbb3e7ecab9cbe4ee42db84fc85fd69aceb1240 Mon Sep 17 00:00:00 2001
From: Esko Luontola <esko@luontola.fi>
Date: Fri, 5 Jan 2018 18:59:32 +0200
Subject: [PATCH] Fix "Cannot read property 'classList' of null" when the child
 of CSSTransition is rendered as null (#208) (#270)

---
 src/CSSTransition.js            |  6 +++---
 test/CSSTransitionGroup-test.js | 22 ++++++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/CSSTransition.js b/src/CSSTransition.js
index 8a3fd10b..f5718235 100644
--- a/src/CSSTransition.js
+++ b/src/CSSTransition.js
@@ -7,8 +7,8 @@ import React from 'react';
 import Transition from './Transition';
 import { classNamesShape } from './utils/PropTypes';
 
-const addClass = (node, classes) => classes && classes.split(' ').forEach(c => addOneClass(node, c));
-const removeClass = (node, classes) => classes && classes.split(' ').forEach(c => removeOneClass(node, c));
+const addClass = (node, classes) => node && classes && classes.split(' ').forEach(c => addOneClass(node, c));
+const removeClass = (node, classes) => node && classes && classes.split(' ').forEach(c => removeOneClass(node, c));
 
 const propTypes = {
   ...Transition.propTypes,
@@ -190,7 +190,7 @@ class CSSTransition extends React.Component {
     // This is for to force a repaint,
     // which is necessary in order to transition styles when adding a class name.
     /* eslint-disable no-unused-expressions */
-    node.scrollTop;
+    node && node.scrollTop;
     /* eslint-enable no-unused-expressions */
     addClass(node, className);
   }
diff --git a/test/CSSTransitionGroup-test.js b/test/CSSTransitionGroup-test.js
index 87c8c6dd..472d8385 100644
--- a/test/CSSTransitionGroup-test.js
+++ b/test/CSSTransitionGroup-test.js
@@ -119,6 +119,28 @@ describe('CSSTransitionGroup', () => {
     );
   });
 
+  it('should work with a child which renders as null', () => {
+    const NullComponent = () => null;
+    // Testing the whole lifecycle of entering and exiting,
+    // because those lifecycle methods used to fail when the DOM node was null.
+    ReactDOM.render(
+      <TransitionGroup/>,
+      container,
+    );
+    ReactDOM.render(
+      <TransitionGroup>
+        <CSSTransition classNames="yolo" timeout={0}>
+          <NullComponent/>
+        </CSSTransition>
+      </TransitionGroup>,
+      container,
+    );
+    ReactDOM.render(
+      <TransitionGroup/>,
+      container,
+    );
+  });
+
   it('should transition from one to null', () => {
     let a = ReactDOM.render(
       <TransitionGroup>