[APP-798] add key to `ProfileCardPills` render method (#1158)

* add key to `ProfileCardPills` render method

* More reliable key generation

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

2 files changed, 17 insertions, 1 deletions

diff --git a/src/lib/moderation.ts b/src/lib/moderation.ts
index a90c4dc9c..aadee0e74 100644
--- a/src/lib/moderation.ts
+++ b/src/lib/moderation.ts
@@ -92,3 +92,16 @@ export function isCauseALabelOnUri(
   }
   return cause.label.uri === uri
 }
+
+export function getModerationCauseKey(cause: ModerationCause): string {
+  const source =
+    cause.source.type === 'labeler'
+      ? cause.source.labeler.did
+      : cause.source.type === 'list'
+      ? cause.source.list.uri
+      : 'user'
+  if (cause.type === 'label') {
+    return `label:${cause.label.val}:${source}`
+  }
+  return `${cause.type}:${source}`
+}
diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx
index ba0c59def..771785ee9 100644
--- a/src/view/com/profile/ProfileCard.tsx
+++ b/src/view/com/profile/ProfileCard.tsx
@@ -19,6 +19,7 @@ import {makeProfileLink} from 'lib/routes/links'
 import {
   describeModerationCause,
   getProfileModerationCauses,
+  getModerationCauseKey,
 } from 'lib/moderation'
 
 export const ProfileCard = observer(
@@ -131,7 +132,9 @@ function ProfileCardPills({
       {causes.map(cause => {
         const desc = describeModerationCause(cause, 'account')
         return (
-          <View style={[s.mt5, pal.btn, styles.pill]}>
+          <View
+            style={[s.mt5, pal.btn, styles.pill]}
+            key={getModerationCauseKey(cause)}>
             <Text type="xs" style={pal.text}>
               {cause?.type === 'label' ? '⚠' : ''}
               {desc.name}