chore: Revert back react key. #484

h2oai · Jul 7, 2021 · 444edef · 444edef
1 parent 6e5bcd5
commit 444edef
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/ui/src/form.tsx b/ui/src/form.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as Fluent from '@fluentui/react'
-import { B, Model, Packed, S, unpack } from 'h2o-wave'
+import { B, Model, Packed, S, unpack, xid } from 'h2o-wave'
 import React from 'react'
 import { stylesheet } from 'typestyle'
 import { Button, Buttons, XButtons, XStandAloneButton } from './button'
@@ -192,14 +192,14 @@ export enum XComponentAlignment { Top, Left, Right }
 export const
   XComponents = ({ items, alignment, inset }: { items: Component[], alignment?: XComponentAlignment, inset?: B }) => {
     const
-      components = items.map((m: any, i) => {
+      components = items.map((m: any) => {
         const
           // All form items are wrapped by their component name (first and only prop of "m").
           visible = m[Object.keys(m)[0]].visible ?? true,
           visibleStyles: React.CSSProperties = visible ? {} : { display: 'none' }
 
         return (
-          <div key={i} data-visible={visible} style={visibleStyles}>
+          <div key={xid()} data-visible={visible} style={visibleStyles}>
             <XComponent model={m} />
           </div>
         )