add key helper

EasyPost · Oct 20, 2023 · 12c5f65 · 12c5f65
1 parent 8041304
commit 12c5f65
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git a/easy-ui-react/src/SearchNav/CTAGroup.tsx b/easy-ui-react/src/SearchNav/CTAGroup.tsx
@@ -7,7 +7,7 @@ import { Icon } from "../Icon";
 import { UnstyledButton } from "../UnstyledButton";
 import { useInternalSearchNavContext } from "./context";
 import { classNames } from "../utilities/css";
-import { flattenChildren } from "../utilities/react";
+import { flattenChildren, getFlattenedKey } from "../utilities/react";
 
 import styles from "./CTAGroup.module.scss";
 
@@ -54,11 +54,9 @@ export function CTAGroup(props: CTAGroupProps) {
             <Menu.Section aria-label="Nav actions">
               {items.map((item) => {
                 const itemEle = item as ReactElement;
-                const keyAsString = itemEle.key as string;
-                const originalKey = keyAsString?.substring(2);
                 return (
                   <Menu.Item
-                    key={originalKey || itemEle.key}
+                    key={getFlattenedKey(itemEle.key)}
                     href={itemEle.props.href}
                     target={itemEle.props.target}
                   >

diff --git a/easy-ui-react/src/SearchNav/CondensedSearchNav.tsx b/easy-ui-react/src/SearchNav/CondensedSearchNav.tsx
@@ -10,6 +10,7 @@ import { classNames } from "../utilities/css";
 import { useInternalSearchNavContext } from "./context";
 
 import styles from "./CondensedSearchNav.module.scss";
+import { getFlattenedKey } from "../utilities/react";
 
 /**
  * @privateRemarks
@@ -53,10 +54,8 @@ export function CondensedSearchNav() {
               <Menu.Section aria-label={selectLabel}>
                 {selectChildren?.map((item) => {
                   const itemEle = item as ReactElement;
-                  const keyAsString = itemEle.key as string;
-                  const originalKey = keyAsString.substring(2);
                   return (
-                    <Menu.Item key={originalKey || itemEle.key}>
+                    <Menu.Item key={getFlattenedKey(itemEle.key)}>
                       {itemEle.props.children}
                     </Menu.Item>
                   );
@@ -65,11 +64,9 @@ export function CondensedSearchNav() {
               <Menu.Section aria-label="Nav actions">
                 {ctaGroupChildren?.map((item) => {
                   const itemEle = item as ReactElement;
-                  const keyAsString = itemEle.key as string;
-                  const originalKey = keyAsString.substring(2);
                   return (
                     <Menu.Item
-                      key={originalKey || itemEle.key}
+                      key={getFlattenedKey(itemEle.key)}
                       href={itemEle.props.href}
                       target={itemEle.props.target}
                     >

diff --git a/easy-ui-react/src/utilities/react.ts b/easy-ui-react/src/utilities/react.ts
@@ -1,5 +1,6 @@
 import {
   Children,
+  Key,
   NamedExoticComponent,
   ReactElement,
   ReactNode,
@@ -73,3 +74,23 @@ export function getDisplayNameFromReactNode(component: ReactNode) {
     return componentType.displayName;
   }
 }
+
+/**
+ * When Children.toArray is called, keys of the child are modified
+ * in a predictable way. This function returns the original key
+ * of the child.
+ */
+export function getFlattenedKey(
+  key: Key | null,
+  level: number = 2,
+  defaultKey: string | Key = "",
+): string | Key {
+  if (key) {
+    const keyAsString = key.toString();
+    if (keyAsString) {
+      const originalKey = keyAsString.substring(level);
+      return originalKey;
+    }
+  }
+  return defaultKey;
+}