fix: an issue with key prop warning

Co-authored-by: Diljohn Singh <[email protected]>
Co-authored-by: Andries Smit <[email protected]>

Author: 3 people

packages/pluggableWidgets/html-element-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed a warning related to non-unique "key" props that appeared in certain scenarios.
+
 ## [1.2.2] - 2025-03-14
 
 ### Security

packages/pluggableWidgets/html-element-web/src/HTMLElement.tsx

@@ -1,4 +1,4 @@
-import { Fragment, JSX, ReactElement } from "react";
+import { Fragment, JSX, ReactElement, useId } from "react";
 
 import { HTMLElementContainerProps } from "../typings/HTMLElementProps";
 import {
@@ -16,15 +16,17 @@ export function HTMLElement(props: HTMLElementContainerProps): ReactElement | nu
     const tag = prepareTag(props.tagName, props.tagNameCustom);
     const items = props.tagUseRepeat ? props.tagContentRepeatDataSource?.items : [undefined];
 
+    const id = useId();
+
     if (!items?.length) {
         return null;
     }
 
     return (
         <Fragment>
-            {items.map(item => (
+            {items.map((item, index) => (
                 <HTMLTag
-                    key={item?.id}
+                    key={`${id}_${item?.id || index}`}
                     tagName={tag as keyof JSX.IntrinsicElements}
                     attributes={{
                         ...prepareAttributes(createAttributeResolver(item), props.attributes, props.class, props.style),

packages/pluggableWidgets/html-element-web/src/components/__tests__/HTMLTag.spec.tsx

@@ -37,7 +37,7 @@ describe("HTMLTag", () => {
     });
 
     it("with innerHTML apply html sanitizing", () => {
-        const checkSapshot = (html: string): void => {
+        const checkSnapshot = (html: string): void => {
             expect(
                 render(
                     <HTMLTag
@@ -53,10 +53,10 @@ describe("HTMLTag", () => {
             ).toMatchSnapshot();
         };
 
-        checkSapshot("<p>Lorem ipsum <script>alert(1)</script></p>");
-        checkSapshot("<img src=x onerror=alert(1)>");
-        checkSapshot(`<b onmouseover=alert(‘XSS testing!‘)>ok</b>`);
-        checkSapshot("<a>123</a><option><style><img src=x onerror=alert(1)></style>");
+        checkSnapshot("<p>Lorem ipsum <script>alert(1)</script></p>");
+        checkSnapshot("<img src=x onerror=alert(1)>");
+        checkSnapshot(`<b onmouseover=alert(‘XSS testing!‘)>ok</b>`);
+        checkSnapshot("<a>123</a><option><style><img src=x onerror=alert(1)></style>");
     });
 
     it("fires events", async () => {