Fixed spell description key issue

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;
 }