Fix get display same slide (#480)

* change getDisplaySameSlide.js to handle children arrays

Current code of getDisplaySameSlide.js was not handling correctly the situation of having children inside an array (common case for dynamic amount of children).
Updated the code so that we use React.Children that traverses nested children arrays

* Update getDisplaySameSlide.js

* remove parentheses to make linter happy

* Update getDisplaySameSlide.js

* Make linter happy by adding some parentheses

* Update getDisplaySameSlide.js

* fix getDisplaySameSlide

* add test

Author: MastroLindus

packages/react-swipeable-views-core/src/getDisplaySameSlide.js

@@ -1,13 +1,16 @@
+import React from 'react';
+
 const getDisplaySameSlide = (props, nextProps) => {
   let displaySameSlide = false;
+  const getChildrenKey = child => (child ? child.key : 'empty');
 
   if (props.children.length && nextProps.children.length) {
-    const oldChildren = props.children[props.index];
-    const oldKey = oldChildren ? oldChildren.key : 'empty';
+    const oldKeys = React.Children.map(props.children, getChildrenKey);
+    const oldKey = oldKeys[props.index];
 
-    if (oldKey !== null) {
-      const newChildren = nextProps.children[nextProps.index];
-      const newKey = newChildren ? newChildren.key : 'empty';
+    if (oldKey !== null && oldKey !== undefined) {
+      const newKeys = React.Children.map(nextProps.children, getChildrenKey);
+      const newKey = newKeys[nextProps.index];
 
       if (oldKey === newKey) {
         displaySameSlide = true;

packages/react-swipeable-views-core/src/getDisplaySameSlide.test.js

@@ -126,4 +126,26 @@ describe('getDisplaySameSlide', () => {
 
     assert.strictEqual(getDisplaySameSlide(oldState.props(), newState.props()), true);
   });
+
+  it('should work with dynamic children in arrays', () => {
+    const oldState = mount(
+      <SwipeableViews index={2}>
+        <div key="1" />
+        {['2', '3', '4'].map(k => (
+          <div key={k} />
+        ))}
+      </SwipeableViews>,
+    );
+
+    const newState = mount(
+      <SwipeableViews index={3}>
+        <div key="1" />
+        {['2', '3', '4'].map(k => (
+          <div key={k} />
+        ))}
+      </SwipeableViews>,
+    );
+
+    assert.strictEqual(getDisplaySameSlide(oldState.props(), newState.props()), false);
+  });
 });