fix(Forms): ensure Tools.Log formats arrays with square brackets (#4384)

packages/dnb-eufemia/src/extensions/forms/Tools/Log.tsx

@@ -54,13 +54,15 @@ function replaceUndefinedValues(
 ): unknown {
   if (typeof value === 'undefined') {
     return replaceWith
+  } else if (Array.isArray(value)) {
+    return value.map((item) => replaceUndefinedValues(item, replaceWith))
   } else if (value && typeof value === 'object' && value !== replaceWith) {
     return {
       ...value,
       ...Object.fromEntries(
         Object.entries(value).map(([k, v]) => [
           k,
-          replaceUndefinedValues(v),
+          replaceUndefinedValues(v, replaceWith),
         ])
       ),
     }

packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/Log.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Form, Tools } from '../../'
+
+describe('Tools.Log', () => {
+  it('should render data context', () => {
+    const data = { foo: 'bar' }
+    render(
+      <Form.Handler data={data}>
+        <Tools.Log />
+      </Form.Handler>
+    )
+
+    const element = document.querySelector('output')
+    expect(element.textContent).toBe(JSON.stringify(data, null, 2) + ' ')
+  })
+
+  it('should format array with square brackets', () => {
+    const data = { foo: ['bar', 'baz'] }
+    render(
+      <Form.Handler data={data}>
+        <Tools.Log />
+      </Form.Handler>
+    )
+
+    const element = document.querySelector('output')
+    expect(element.textContent).toBe(JSON.stringify(data, null, 2) + ' ')
+    expect(element.textContent).toContain('[')
+    expect(element.textContent).toContain('}')
+  })
+
+  it('should format "undefined"', () => {
+    const data = { foo: { bar: undefined } }
+    render(
+      <Form.Handler data={data}>
+        <Tools.Log />
+      </Form.Handler>
+    )
+
+    const element = document.querySelector('output')
+    expect(element.textContent).toContain('"bar": "undefined"')
+  })
+})