Merge pull request #405 from jasperfirecai2/main

fix(CToast): change special prop `key` to `innerKey`

Author: mrholek

packages/coreui-react/src/components/toast/CToast.tsx

@@ -44,7 +44,7 @@ export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
   /**
    * @ignore
    */
-  key?: number
+  innerKey?: number | string
   /**
    * Callback fired when the component requests to be closed.
    */
@@ -76,7 +76,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
       color,
       delay = 5000,
       index,
-      key,
+      innerKey,
       visible = false,
       onClose,
       onShow,
@@ -143,7 +143,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
               onMouseEnter={() => clearTimeout(timeout.current)}
               onMouseLeave={() => _autohide()}
               {...rest}
-              key={key}
+              key={innerKey}
               ref={forkedRef}
             >
               {children}
@@ -163,7 +163,10 @@ CToast.propTypes = {
   color: colorPropType,
   delay: PropTypes.number,
   index: PropTypes.number,
-  key: PropTypes.number,
+  innerKey: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string
+  ]),
   onClose: PropTypes.func,
   onShow: PropTypes.func,
   visible: PropTypes.bool,

packages/coreui-react/src/components/toast/CToaster.tsx

@@ -45,7 +45,7 @@ export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
         ...state,
         React.cloneElement(push, {
           index: index.current,
-          key: index.current,
+          innerKey: index.current,
           onClose: (index: number) =>
             setToasts((state) => state.filter((i) => i.props.index !== index)),
         }),