Fix several warnings in example apps

amalgamaco · Jan 26, 2023 · e570a23 · e570a23
1 parent 21e345d
commit e570a23
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/example/src/components/CardExample.tsx b/example/src/components/CardExample.tsx
@@ -15,6 +15,7 @@ const CardExample = () => (
 				rightActions={[
 					<IconButton
 						as={UIKitIcon}
+						key="more-button"
 						name="more-vertical-outline"
 						onPress={() => window.alert( 'more button pressed' )}
 					/>

diff --git a/example/src/components/PaletteColorGrid.tsx b/example/src/components/PaletteColorGrid.tsx
@@ -104,7 +104,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<VStack>
 				{textStyles.map( ( { color, label } ) => (
-					<Text variant="body-special" color={color}>{label}</Text>
+					<Text key={color} variant="body-special" color={color}>{label}</Text>
 				) )}
 			</VStack>
 
@@ -114,7 +114,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<HStack flexWrap='wrap'>
 				{backgroundPrimaryStyles.map( ( { color, label } ) => (
-					<Box bg={color} height={80} width={80} marginRight="2" marginBottom="2">
+					<Box key={color} bg={color} height={80} width={80} marginRight="2" marginBottom="2">
 						<Text variant="small" textAlign='center' color="white">{label}</Text>
 					</Box>
 				) )}
@@ -126,7 +126,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<HStack flexWrap='wrap'>
 				{backgroundSecondaryStyles.map( ( { color, label } ) => (
-					<Box bg={color} height={80} width={80} marginRight="2" marginBottom="2">
+					<Box key={color} bg={color} height={80} width={80} marginRight="2" marginBottom="2">
 						<Text variant="small" textAlign='center' color="text-primary">{label}</Text>
 					</Box>
 				) )}
@@ -138,7 +138,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<HStack flexWrap='wrap'>
 				{borderStyles.map( ( { color, label } ) => (
-					<Box borderColor={color} borderWidth="xs" height={80} width={80} marginRight="2" marginBottom="2">
+					<Box key={color} borderColor={color} borderWidth="xs" height={80} width={80} marginRight="2" marginBottom="2">
 						<Text variant="small" textAlign='center' color="text-primary">{label}</Text>
 					</Box>
 				) )}

diff --git a/web_example/src/components/CardExample.tsx b/web_example/src/components/CardExample.tsx
@@ -15,6 +15,7 @@ const CardExample = () => (
 				rightActions={[
 					<IconButton
 						as={UIKitIcon}
+						key="more-button"
 						name="more-vertical-outline"
 						onPress={() => window.alert( 'more button pressed' )}
 					/>

diff --git a/web_example/src/components/PaletteColorGrid.tsx b/web_example/src/components/PaletteColorGrid.tsx
@@ -104,7 +104,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<VStack>
 				{textStyles.map( ( { color, label } ) => (
-					<Text variant="body-special" color={color}>{label}</Text>
+					<Text key={color} variant="body-special" color={color}>{label}</Text>
 				) )}
 			</VStack>
 
@@ -114,7 +114,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<HStack flexWrap='wrap'>
 				{backgroundPrimaryStyles.map( ( { color, label } ) => (
-					<Box bg={color} height="100px" width="100px" marginRight="2" marginBottom="2">
+					<Box key={color} bg={color} height="100px" width="100px" marginRight="2" marginBottom="2">
 						<Text variant="body" textAlign='center' color="white">{label}</Text>
 					</Box>
 				) )}
@@ -126,7 +126,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<HStack flexWrap='wrap'>
 				{backgroundSecondaryStyles.map( ( { color, label } ) => (
-					<Box bg={color} height="100px" width="100px" marginRight="2" marginBottom="2">
+					<Box key={color} bg={color} height="100px" width="100px" marginRight="2" marginBottom="2">
 						<Text variant="body" textAlign='center' color="text-primary">{label}</Text>
 					</Box>
 				) )}
@@ -138,7 +138,7 @@ const PaletteColorGrid = () => {
 			<View style={styles.vspace} />
 			<HStack flexWrap='wrap'>
 				{borderStyles.map( ( { color, label } ) => (
-					<Box borderColor={color} borderWidth="sm" height="100px" width="100px" marginRight="2" marginBottom="2">
+					<Box key={color} borderColor={color} borderWidth="sm" height="100px" width="100px" marginRight="2" marginBottom="2">
 						<Text variant="body" textAlign='center' color="text-primary">{label}</Text>
 					</Box>
 				) )}