More pr comment

components/WordCloud.tsx

@@ -150,11 +150,11 @@ const WordCloudWords: React.FC<WordCloudWordsProps> = ({
       random={fixedValueGenerator}
     >
       {(cloudWords) =>
-        cloudWords.map((word, i) => {
+        cloudWords.map((word, index) => {
           return (
             <Text
-              key={`wordcloud-word-${word.text ?? ""}`}
+              key={`wordcloud-word-${word.text ?? ""}-${index}`}
-              fill={wordColors[i % wordColors.length]}
+              fill={wordColors[index % wordColors.length]}
               transform={`translate(${word.x ?? 0}, ${word.y ?? 0})`}
               fontSize={word.size}
               fontFamily={word.font}
@@ -173,13 +173,12 @@ const WordCloudWords: React.FC<WordCloudWordsProps> = ({
 
                   if (word.text) {
                     showTooltip(
-                      { text: word.text, value: data[i].value },
+                      { text: word.text, value: data[index].value },
                       eventSvgCoords.x -
                         word.text.length * TOOLTIP_HORIZONTAL_SHIFT_SCALER,
                       eventSvgCoords.y
                     );
                   }
-                  console.log(e, eventSvgCoords);
                 }) as React.MouseEventHandler<SVGTextElement>
               }
               onMouseLeave={(_) => hideTooltip()}

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "engines": {
     "node": "^16",
-    "npm": ">=7"
+    "npm": "^8.0.0"
   },
   "scripts": {
     "dev": "next dev",

pages/playground.tsx

@@ -49,6 +49,16 @@ export default function Home() {
           right: 20,
         }}
       />
+
+      <h2>
+        <code>{"<WordCloud />"}</code>
+      </h2>
+      <WordCloud
+        data={moreMockCategoricalData.map((word) => ({
+          text: word.key,
+          value: word.value,
+        }))}
+      />
     </div>
   );
 }