feat: add datastore object id as key to collections if not set

Author: alharris-at

packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap

@@ -219,7 +219,10 @@ export default function CollectionOfCustomButtons(
       {...getOverrideProps(overrides, \\"Collection\\")}
     >
       {(item, index) => (
-        <Flex {...getOverrideProps(overrides, \\"Collection.Flex[0]\\")}>
+        <Flex
+          key={item.id}
+          {...getOverrideProps(overrides, \\"Collection.Flex[0]\\")}
+        >
           <Button
             labelWidth={width}
             backgroundColor={buttonColor?.favoriteColor}
@@ -322,7 +325,10 @@ export default function CollectionOfCustomButtons(
       {...getOverrideProps(overrides, \\"Collection\\")}
     >
       {(item, index) => (
-        <Flex {...getOverrideProps(overrides, \\"Collection.Flex[0]\\")}>
+        <Flex
+          key={item.id}
+          {...getOverrideProps(overrides, \\"Collection.Flex[0]\\")}
+        >
           <Button
             labelWidth={width}
             backgroundColor={buttonColor?.favoriteColor}
@@ -421,7 +427,10 @@ export default function CollectionOfCustomButtons(
       {...getOverrideProps(overrides, \\"Collection\\")}
     >
       {(item, index) => (
-        <Flex {...getOverrideProps(overrides, \\"Collection.Flex[0]\\")}>
+        <Flex
+          key={item.id}
+          {...getOverrideProps(overrides, \\"Collection.Flex[0]\\")}
+        >
           <Button
             labelWidth={width}
             backgroundColor={buttonColor?.favoriteColor}
@@ -489,6 +498,7 @@ export default function ListingCardCollection(
           marginBottom=\\"0\\"
           marginTop=\\"0\\"
           marginLeft=\\"0\\"
+          key={item.id}
           {...getOverrideProps(overrides, \\"Collection.ListingCard[0]\\")}
         ></ListingCard>
       )}
@@ -532,6 +542,7 @@ export default function ListingCardCollection(
     >
       {(item, index) => (
         <ListingCard
+          key={item.id}
           {...getOverrideProps(overrides, \\"Collection.ListingCard[0]\\")}
         ></ListingCard>
       )}
@@ -2267,6 +2278,7 @@ export default function CollectionDefaultValue(
     >
       {(item, index) => (
         <Text
+          key={item.id}
           children={item.username || \\"Collection Default Value\\"}
           {...getOverrideProps(overrides, \\"Collection.Text[0]\\")}
         ></Text>

packages/codegen-ui-react/lib/amplify-ui-renderers/collection.ts

@@ -20,6 +20,7 @@ import { ReactComponentWithChildrenRenderer } from '../react-component-with-chil
 
 export default class CollectionRenderer extends ReactComponentWithChildrenRenderer<BaseComponentProps> {
   renderElement(renderChildren: (children: StudioComponentChild[]) => JsxChild[]): JsxElement {
+    this.addKeyPropertyToChildren(this.component.children ?? []);
     const childrenJsx = this.component.children ? renderChildren(this.component.children ?? []) : [];
 
     const arrowFuncExpr = this.renderItemArrowFunctionExpr(childrenJsx);
@@ -35,6 +36,21 @@ export default class CollectionRenderer extends ReactComponentWithChildrenRender
     return element;
   }
 
+  private addKeyPropertyToChildren(children: StudioComponentChild[]) {
+    children.forEach((child: StudioComponentChild) => {
+      if ('key' in child.properties) {
+        return;
+      }
+      // eslint-disable-next-line no-param-reassign
+      child.properties.key = {
+        collectionBindingProperties: {
+          property: '',
+          field: 'id',
+        },
+      };
+    });
+  }
+
   private findItemsVariableName(): string | undefined {
     if (isStudioComponentWithCollectionProperties(this.component)) {
       const collectionProps = Object.entries(this.component.collectionProperties ?? {});