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({text.slice(lastIndex, match.index)});
if (match.index !== undefined) {
if (type == 'dice') {
result.push(
- handleLink(type, name)} className='link'>
+ handleLink(type, name)} className='link' key={key}>
{name}
);
@@ -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(
- handleLink('dice', dice)} className='link'>
+ handleLink('dice', dice)} className='link' key={key}>
{dice}
);
} else if (type == 'bold') {
- result.push({name});
+ result.push(
+
+ {name}
+
+ );
} else if (type == 'subclass') {
const [className, subclassName] = name.split('|');
result.push(
-
+
{capitalize(className)} ({capitalize(subclassName)})
);
} else {
- result.push({capitalizeFirst ? capitalize(name) : name});
+ result.push({capitalizeFirst ? capitalize(name) : name});
}
lastIndex = match.index + full.length;
}
}
- result.push(text.slice(lastIndex));
+ result.push({text.slice(lastIndex)});
+
return result;
}