diff --git a/packages/pluggableWidgets/html-element-web/CHANGELOG.md b/packages/pluggableWidgets/html-element-web/CHANGELOG.md
index 7e41f87bd4..b692bad33f 100644
--- a/packages/pluggableWidgets/html-element-web/CHANGELOG.md
+++ b/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
diff --git a/packages/pluggableWidgets/html-element-web/package.json b/packages/pluggableWidgets/html-element-web/package.json
index f62b156e95..6b48712ea8 100644
--- a/packages/pluggableWidgets/html-element-web/package.json
+++ b/packages/pluggableWidgets/html-element-web/package.json
@@ -42,7 +42,7 @@
},
"dependencies": {
"@mendix/widget-plugin-component-kit": "workspace:*",
- "dompurify": "^3.2.6"
+ "dompurify": "^3.3.0"
},
"devDependencies": {
"@mendix/automation-utils": "workspace:*",
diff --git a/packages/pluggableWidgets/html-element-web/src/HTMLElement.tsx b/packages/pluggableWidgets/html-element-web/src/HTMLElement.tsx
index 10b5874968..a6127628f7 100644
--- a/packages/pluggableWidgets/html-element-web/src/HTMLElement.tsx
+++ b/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 (
- {items.map(item => (
+ {items.map((item, index) => (
{
});
it("with innerHTML apply html sanitizing", () => {
- const checkSapshot = (html: string): void => {
+ const checkSnapshot = (html: string): void => {
expect(
render(
{
).toMatchSnapshot();
};
- checkSapshot("Lorem ipsum
");
- checkSapshot("
");
- checkSapshot(`ok`);
- checkSapshot("123