From c58a5c62d9992e7778b7f82e77b8b118c05cded1 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 11 Oct 2021 10:49:46 +0200
Subject: [PATCH] #142 - Fix for unknown tags

---
 src/panelWebView/components/Tags.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/panelWebView/components/Tags.tsx b/src/panelWebView/components/Tags.tsx
index f60dbf15..9a5091a3 100644
--- a/src/panelWebView/components/Tags.tsx
+++ b/src/panelWebView/components/Tags.tsx
@@ -16,17 +16,24 @@ export const Tags: React.FunctionComponent<ITagsProps> = (props: React.PropsWith
 
   const knownTags = values.filter(v => options.includes(v));
   const unknownTags = values.filter(v => !options.includes(v));
+
+  const generateKey = (tag: string, idx: number) => {
+    if (tag) {
+      return `${tag.replace(/ /g, "_")}-${idx}`;
+    }
+    return `tag-${idx}`;
+  };
   
   return (
     <div className={`article__tags__items`}>
       {
-        knownTags.map(t => (
-          <Tag key={t.replace(/ /g, "_")} value={t} className={`article__tags__items__pill_exists`} onRemove={onRemove} title={`Remove ${t}`} />
+        knownTags.map((t, idx) => (
+          <Tag key={generateKey(t, idx)} value={t} className={`article__tags__items__pill_exists`} onRemove={onRemove} title={`Remove ${t}`} />
         ))
       }
       {
-        unknownTags.map(t => (
-          <Tag key={t.replace(/ /g, "_")} value={t} className={`article__tags__items__pill_notexists`} onRemove={onRemove} onCreate={onCreate} title={`Be aware, this tag "${t}" is not saved in your settings. Once removed, it will be gone forever.`} disableConfigurable={disableConfigurable} />
+        unknownTags.map((t, idx) => (
+          <Tag key={generateKey(t, idx)} value={t} className={`article__tags__items__pill_notexists`} onRemove={onRemove} onCreate={onCreate} title={`Be aware, this tag "${t}" is not saved in your settings. Once removed, it will be gone forever.`} disableConfigurable={disableConfigurable} />
         ))
       }
     </div>