From 52f91ae05b478399f985f2c723831846e91bf5cc Mon Sep 17 00:00:00 2001
From: jamessspanggg <jamespangmunwai@gmail.com>
Date: Sun, 1 Oct 2023 18:57:11 +0800
Subject: [PATCH] fix: set slider wrapper key based on children keys passed

---
 src/slider.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/slider.js b/src/slider.js
index 65d63a4b5..b2e156edc 100644
--- a/src/slider.js
+++ b/src/slider.js
@@ -171,9 +171,10 @@ export default class Slider extends React.Component {
             currentWidth = children[k].props.style.width;
           }
           if (k >= children.length) break;
+          const defaultChildKey = 100 * i + 10 * j + k;
           row.push(
             React.cloneElement(children[k], {
-              key: 100 * i + 10 * j + k,
+              key: children[k].key || defaultChildKey,
               tabIndex: -1,
               style: {
                 width: `${100 / settings.slidesPerRow}%`,
@@ -182,16 +183,19 @@ export default class Slider extends React.Component {
             })
           );
         }
-        newSlide.push(<div key={10 * i + j}>{row}</div>);
+        newSlide.push(
+          <div key={row.map(child => child.key).join("")}>{row}</div>
+        );
       }
+      const key = newSlide.map(row => row.key).join("");
       if (settings.variableWidth) {
         newChildren.push(
-          <div key={i} style={{ width: currentWidth }}>
+          <div key={key} style={{ width: currentWidth }}>
             {newSlide}
           </div>
         );
       } else {
-        newChildren.push(<div key={i}>{newSlide}</div>);
+        newChildren.push(<div key={key}>{newSlide}</div>);
       }
     }