Skip to content

Commit 63092e3

Browse files
committed
add key to TransactionToast children
1 parent f96f754 commit 63092e3

File tree

2 files changed

+15
-13
lines changed

2 files changed

+15
-13
lines changed

src/internal/components/Toast.tsx

+2-10
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ type ToastProps = {
1111
isVisible: boolean;
1212
onClose: () => void;
1313
children: React.ReactNode;
14-
parentComponentLifecycleStatus?: string;
1514
};
1615

1716
const defaultAnimationByPosition = {
@@ -29,12 +28,11 @@ export function Toast({
2928
isVisible,
3029
onClose,
3130
children,
32-
parentComponentLifecycleStatus,
3331
}: ToastProps) {
3432
const positionClass = getToastPosition(position);
3533
const animationClass = animation ?? defaultAnimationByPosition[position];
3634

37-
/* biome-ignore lint/correctness/useExhaustiveDependencies: retrigger durationMs on updates to children or lifecycleStatus */
35+
/* biome-ignore lint/correctness/useExhaustiveDependencies: retrigger durationMs on updates to children */
3836
useEffect(() => {
3937
const timer = setTimeout(() => {
4038
if (isVisible) {
@@ -47,13 +45,7 @@ export function Toast({
4745
clearTimeout(timer);
4846
}
4947
};
50-
}, [
51-
durationMs,
52-
isVisible,
53-
onClose,
54-
children,
55-
parentComponentLifecycleStatus,
56-
]);
48+
}, [durationMs, isVisible, onClose, children]);
5749

5850
if (!isVisible) {
5951
return null;

src/transaction/components/TransactionToast.tsx

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { useCallback, useEffect } from 'react';
1+
import {
2+
Children,
3+
cloneElement,
4+
isValidElement,
5+
useCallback,
6+
useEffect,
7+
} from 'react';
28
import { Toast } from '../../internal/components/Toast';
39
import type { TransactionToastReact } from '../types';
410
import { useTransactionContext } from './TransactionProvider';
@@ -48,9 +54,13 @@ export function TransactionToast({
4854
durationMs={durationMs}
4955
isVisible={isToastVisible}
5056
onClose={closeToast}
51-
parentComponentLifecycleStatus={lifecycleStatus.statusName}
5257
>
53-
{children}
58+
{Children.map(children, (child) => {
59+
if (isValidElement(child)) {
60+
return cloneElement(child, { key: lifecycleStatus.statusName });
61+
}
62+
return child;
63+
})}
5464
</Toast>
5565
);
5666
}

0 commit comments

Comments
 (0)