From daf76071ea7885d798a163bce0985989fc1ae555 Mon Sep 17 00:00:00 2001
From: Benjamin Sherriff <ben.sherriff@blackcape.io>
Date: Mon, 23 Oct 2023 20:36:25 -0400
Subject: [PATCH] Fixed spell description key issue

---
 ui/src/components/SpellModal.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/SpellModal.tsx b/ui/src/components/SpellModal.tsx
index 0e537f7..385da29 100644
--- a/ui/src/components/SpellModal.tsx
+++ b/ui/src/components/SpellModal.tsx
@@ -95,13 +95,15 @@ function parseText(text: string, capitalizeFirst?: boolean): (string | JSX.Eleme
   const matches = text.matchAll(regex);
   const result = [];
   let lastIndex = 0;
+
   for (const match of matches) {
+    const key = crypto.randomUUID();
     const [full, type, name] = match;
-    result.push(text.slice(lastIndex, match.index));
+    result.push(<span key={crypto.randomUUID()}>{text.slice(lastIndex, match.index)}</span>);
     if (match.index !== undefined) {
       if (type == 'dice') {
         result.push(
-          <span onClick={() => handleLink(type, name)} className='link'>
+          <span onClick={() => handleLink(type, name)} className='link' key={key}>
             {name}
           </span>
         );
@@ -109,26 +111,31 @@ function parseText(text: string, capitalizeFirst?: boolean): (string | JSX.Eleme
         // scaledice format is {@scaledice 1d6|1-9|1d6|}. Parse this out into dice, levels, and dice again.
         const [dice, levels] = name.split('|');
         result.push(
-          <span onClick={() => handleLink('dice', dice)} className='link'>
+          <span onClick={() => handleLink('dice', dice)} className='link' key={key}>
             {dice}
           </span>
         );
       } else if (type == 'bold') {
-        result.push(<span style={{ fontWeight: 'bold' }}>{name}</span>);
+        result.push(
+          <span style={{ fontWeight: 'bold' }} key={key}>
+            {name}
+          </span>
+        );
       } else if (type == 'subclass') {
         const [className, subclassName] = name.split('|');
         result.push(
-          <span>
+          <span key={key}>
             {capitalize(className)} ({capitalize(subclassName)})
           </span>
         );
       } else {
-        result.push(<span>{capitalizeFirst ? capitalize(name) : name}</span>);
+        result.push(<span key={key}>{capitalizeFirst ? capitalize(name) : name}</span>);
       }
       lastIndex = match.index + full.length;
     }
   }
-  result.push(text.slice(lastIndex));
+  result.push(<span key={crypto.randomUUID()}>{text.slice(lastIndex)}</span>);
+
   return result;
 }