Fix missing key warning

vksantoshsunny · Mar 23, 2019 · 232bee1 · 232bee1
1 parent a2fb52d
commit 232bee1
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/packages/components/src/components/cards/partials/rows/CommentRow.tsx b/packages/components/src/components/cards/partials/rows/CommentRow.tsx
@@ -90,6 +90,7 @@ export const CommentRow = React.memo((props: CommentRowProps) => {
             ]}
           >
             {parseTextWithEmojisToReactComponents(body, {
+              key: `comment-text-${body}`,
               imageProps: {
                 style: {
                   width: 14,

diff --git a/packages/components/src/components/common/Label.tsx b/packages/components/src/components/common/Label.tsx
@@ -122,6 +122,7 @@ export function Label(props: LabelProps) {
         )}
         {typeof children === 'string'
           ? parseTextWithEmojisToReactComponents(children, {
+              key: `label-text-${children}`,
               imageProps: {
                 style: {
                   width: small ? 10 : 11,

diff --git a/packages/components/src/components/modals/AdvancedSettingsModal.tsx b/packages/components/src/components/modals/AdvancedSettingsModal.tsx
@@ -269,6 +269,7 @@ export const AdvancedSettingsModal = React.memo(
                         installation.htmlUrl
                       ) && (
                         <View
+                          key={`github-installation-${installation.id}`}
                           style={{
                             flexDirection: 'row',
                             alignItems: 'center',

diff --git a/packages/components/src/utils/helpers/github/emojis.tsx b/packages/components/src/utils/helpers/github/emojis.tsx
@@ -1,6 +1,6 @@
 import { Omit } from '@devhub/core'
 import _ from 'lodash'
-import React from 'react'
+import React, { Fragment } from 'react'
 import { Image, ImageProps } from 'react-native'
 
 const emojis = {
@@ -1538,10 +1538,11 @@ function surrogatePairToCodepoint(lead: number, trail: number) {
 }
 
 export interface EmojiParseOptions {
+  after?: React.ReactNode
   alt?: string
   before?: React.ReactNode
-  after?: React.ReactNode
   imageProps?: Omit<ImageProps, 'source'>
+  key: string
 }
 
 function getComponent(
@@ -1625,5 +1626,7 @@ export function parseTextWithEmojisToReactComponents(
       if (typeof item !== 'string') return item
       return parseTextWithEmojisToReactComponents_2(item, options)
     }),
-  )
+  ).map((item, index) => (
+    <Fragment key={`${options.key}-${index}`}>{item}</Fragment>
+  ))
 }