[Button,Modal]: fix unique key warning in react (#806)

* fix: key error in button * Create swift-pets-hear.md * fix: modal key warning and close button bug * fix: modal key warning in header
web3ui · Sep 27, 2022 · 276c6e5 · 276c6e5
1 parent 66e5e64
commit 276c6e5
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 29 deletions.
diff --git a/.changeset/swift-pets-hear.md b/.changeset/swift-pets-hear.md
@@ -0,0 +1,5 @@
+---
+"@web3uikit/core": patch
+---
+
+[Button]: fix unique key warning in react
diff --git a/apps/example/src/index.tsx b/apps/example/src/index.tsx
@@ -13,7 +13,9 @@ import {
     ConnectButton,
     NFT,
     SendTransaction,
+    Modal,
     VerifyCode,
+    Edit,
 } from 'web3uikit';
 
 const MockBreadCrumbs = [
@@ -69,30 +71,43 @@ export const App = () => {
                             <VerifyCode />
                         </div>
                         <ConnectButton />
-                        <NFT
-                            address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB"
-                            chain="eth"
-                            fetchMetadata
-                            tokenId="1"
-                        />
-                        <SendTransaction
-                            chainId="0x4"
-                            contractOptions={{
-                                abi: contractData['abi'],
-                                contractAddress:
-                                    contractData['contractAddress'],
-                                functionName: 'purchaseCandy',
-                                params: {
-                                    _amount: 1,
-                                },
-                                msgValue: 1000000000000000000,
-                            }}
-                            buttonConfig={{
-                                text: 'Send',
-                                theme: 'primary',
-                            }}
-                            notificationConfig={{ dispatch }}
-                        />
+                        <Modal
+                            isVisible={true}
+                            title={
+                                <div>
+                                    <Edit key="icon" />
+                                    <Typography>Edit Heading</Typography>{' '}
+                                </div>
+                            }
+                            hasFooter={false}
+                            headerHasBottomBorder={false}
+                        >
+                            <NFT
+                                address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB"
+                                chain="eth"
+                                fetchMetadata
+                                tokenId="1"
+                            />
+
+                            <SendTransaction
+                                chainId="0x4"
+                                contractOptions={{
+                                    abi: contractData['abi'],
+                                    contractAddress:
+                                        contractData['contractAddress'],
+                                    functionName: 'purchaseCandy',
+                                    params: {
+                                        _amount: 1,
+                                    },
+                                    msgValue: 1000000000000000000,
+                                }}
+                                buttonConfig={{
+                                    text: 'Send',
+                                    theme: 'primary',
+                                }}
+                                notificationConfig={{ dispatch }}
+                            />
+                        </Modal>
                         <SendTransaction
                             chainId="0x1"
                             contractOptions={{

diff --git a/packages/core/src/lib/Button/ButtonBase/ButtonBase.tsx b/packages/core/src/lib/Button/ButtonBase/ButtonBase.tsx
@@ -1,6 +1,7 @@
 import { Loading } from '../../Loading';
 import styles from './ButtonBase.styles';
 import { ButtonProps } from '../types';
+import React from 'react';
 
 const { BaseButtonStyled } = styles;
 
@@ -46,8 +47,16 @@ const ButtonBase: React.FC<ButtonProps> = ({
                     </>
                 ) : (
                     <>
-                        {text}
-                        {icon && icon}
+                        {text && (
+                            <React.Fragment key={`button-text-${id}`}>
+                                {text}
+                            </React.Fragment>
+                        )}
+                        {icon && (
+                            <React.Fragment key={`button-icon-${id}`}>
+                                {icon}
+                            </React.Fragment>
+                        )}
                     </>
                 )}
             </span>

diff --git a/packages/core/src/lib/Modal/Modal.tsx b/packages/core/src/lib/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import { ModalProps } from './types';
 import Button from '../Button/Button';
 import styles from './Modal.styles';
@@ -73,11 +73,20 @@ const Modal: React.FC<ModalProps> = ({
                     headerHasBottomBorder={headerHasBottomBorder}
                 >
                     <>
-                        {typeof title == 'string' ? <h3>{title}</h3> : title}
+                        {typeof title == 'string' ? (
+                            <h3 key="modal-header-title">{title}</h3>
+                        ) : (
+                            <React.Fragment key="modal-header-title">
+                                {title}
+                            </React.Fragment>
+                        )}
                         {closeButton ? (
-                            closeButton
+                            <React.Fragment key="modal-header-close-button">
+                                {closeButton as ReactNode}
+                            </React.Fragment>
                         ) : (
                             <Button
+                                key="modal-header-close-button"
                                 iconColor="#68738D"
                                 theme="secondary"
                                 radius={100}