From 63bae9fc55f484c920de128500f54cb27c41e081 Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@gmail.com>
Date: Sun, 17 Nov 2019 09:31:24 -0300
Subject: [PATCH] Fix transition group

---
 src/client/components/Notifications.tsx | 27 ++++++++++++++-----------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/client/components/Notifications.tsx b/src/client/components/Notifications.tsx
index 4e34cec..a679048 100644
--- a/src/client/components/Notifications.tsx
+++ b/src/client/components/Notifications.tsx
@@ -1,4 +1,5 @@
 import CSSTransition from 'react-transition-group/CSSTransition'
+import TransitionGroup from 'react-transition-group/TransitionGroup'
 import React from 'react'
 import classnames from 'classnames'
 import { Notification } from '../actions/NotifyActions'
@@ -22,19 +23,21 @@ extends React.PureComponent<NotificationProps> {
     const { notifications, max } = this.props
     return (
       <div className="notifications">
-        {Object.keys(notifications).slice(-max).map(id => (
-          <CSSTransition
-            key={id}
-            classNames='fade'
-            timeout={transitionTimeout}
-          >
-            <div
-              className={classnames(notifications[id].type, 'notification')}
+        <TransitionGroup>
+          {Object.keys(notifications).slice(-max).map(id => (
+            <CSSTransition
+              key={id}
+              classNames='fade'
+              timeout={transitionTimeout}
             >
-              {notifications[id].message}
-            </div>
-          </CSSTransition>
-        ))}
+              <div
+                className={classnames(notifications[id].type, 'notification')}
+              >
+                {notifications[id].message}
+              </div>
+            </CSSTransition>
+          ))}
+        </TransitionGroup>
       </div>
     )
   }