fix: react component key generation and usage

HCRC-178.

Important updates related to React component key generation and it's
usage:

1. React keys must be passed directly to JSX without using spread.
2. Remove all Math.random() usages as react component key, because they
are considered as bad practise.

Rules of keys:
- Keys must be unique among siblings. However, it’s okay to use the same
keys for JSX nodes in different arrays.
- Keys must not change or that defeats their purpose! Don’t generate
them while rendering.

> Do not generate keys on the fly, e.g. with key={Math.random()}. This
will cause keys to never match up between renders, leading to all your
components and DOM being recreated every time. Not only is this slow,
but it will also lose any user input inside the list items. Instead, use
a stable ID based on the data.

Ref. https://18.react.dev/learn/rendering-lists#rules-of-keys

Author: nikomakela

package.json

@@ -108,7 +108,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "git-rev-sync": "^3.0.2",
     "graphql": "^16.9.0",
-    "hds-react": "^4.8.0",
+    "hds-react": "4.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
@@ -151,4 +151,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}

src/core/archiveSearchPageContent/ArchiveSearchPageContent.tsx

@@ -186,24 +186,29 @@ export interface SearchPageContentProps {
    */
   createLargeCard?: (
     item: CollectionItemType,
+    index?: number,
   ) => React.ReactElement<typeof LargeCard>;
-  createCard?: (item: CollectionItemType) => React.ReactElement<typeof Card>;
+  createCard?: (
+    item: CollectionItemType,
+    index?: number,
+  ) => React.ReactElement<typeof Card>;
 }
 
-export const defaultLargeCard = (item: CollectionItemType) => (
+export const defaultLargeCard = (item: CollectionItemType, index?: number) => (
   <LargeCard
     {...item}
+    key={item?.id ?? `card-${index}`}
     title={
       (isEventType(item)
         ? item.name[DEFAULT_LOCALE]
         : (item as ArticleType | PageType)?.title) || undefined
     }
   />
 );
-export const defaultCreateCard = (item: CollectionItemType) => (
+export const defaultCreateCard = (item: CollectionItemType, index?: number) => (
   <Card
     {...item}
-    key={item?.id}
+    key={item?.id ?? `card-${index}`}
     title={
       (isEventType(item)
         ? item.name[DEFAULT_LOCALE]
@@ -231,7 +236,7 @@ export function ArchiveCollection({
         {largeFirstItem && createLargeCard(firstItem)}
       </div>
       <Grid className={styles.grid}>
-        {gridItems.map((item) => createCard(item))}
+        {gridItems.map((item, index) => createCard(item, index))}
       </Grid>
     </>
   );

src/core/carousel/utils/utils.ts

@@ -23,7 +23,7 @@ export function splitArrayIntoChunksOfLen(
  * @return an unique key based on input data.
  */
 export const getItemSetKey = (index: number, itemSetId?: string) =>
-  `itemSet-${itemSetId ?? Math.random()}-${index}`;
+  `itemSet-${itemSetId ?? ''}-${index}`;
 
 /**
  * Create an unique key for item set.
@@ -36,7 +36,7 @@ export const getItemSetItemKey = (
   index: number,
   itemId?: string,
   itemSetPrefix = 'itemSet-item',
-) => `${itemSetPrefix}-${itemId ?? Math.random()}-${index}`;
+) => `${itemSetPrefix}-${itemId ?? ''}-${index}`;
 
 /**
  * @param item - item (element of the array).
@@ -45,6 +45,6 @@ export const getItemSetItemKey = (
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const getSlideDotKey = (item: any, index: number) =>
-  `slide-dot-${item?.id ?? Math.random()}-${index}`;
+  `slide-dot-${item?.id ?? ''}-${index}`;
 
-export const getLoadMoreKey = () => `carousel-loadmore-${Math.random()}`;
+export const getLoadMoreKey = () => 'carousel-loadmore';

src/core/pageContent/PageContent.tsx

@@ -194,8 +194,8 @@ export const defaultCollections = ({
 }) =>
   getCollections(page?.modules ?? [], true)?.reduce(
     (collectionElements: React.JSX.Element[], collection) => {
+      const key = `collection-${btoa(`${collection?.id ?? ''}-${collection?.title ?? ''}-${collection?.description ?? ''}`)}`;
       const commonCollectionProps = {
-        key: `collection-${Math.random()}`,
         title: collection.title,
         description: collection.description,
         type: getCollectionUIType(collection),
@@ -207,6 +207,7 @@ export const defaultCollections = ({
           collectionElements.push(
             <EventSearchCollection
               {...commonCollectionProps}
+              key={key}
               collection={collection}
             />,
           );
@@ -216,6 +217,7 @@ export const defaultCollections = ({
           collectionElements.push(
             <EventSelectionCollection
               {...commonCollectionProps}
+              key={key}
               collection={collection}
             />,
           );
@@ -225,6 +227,7 @@ export const defaultCollections = ({
           collectionElements.push(
             <LocationsSelectionCollection
               {...commonCollectionProps}
+              key={key}
               collection={collection}
               locale={page?.language?.locale as LanguageCodeEnum}
             />,
@@ -234,6 +237,7 @@ export const defaultCollections = ({
         collectionElements.push(
           <PageArticleCollection
             {...commonCollectionProps}
+            key={key}
             collection={collection}
           />,
         );