fix: react components throwing key erorrs (#9)

ory · Sep 27, 2022 · ade37ad · ade37ad
1 parent eb6099b
commit ade37ad
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git a/src/react-components/ory/helpers/error-messages.tsx b/src/react-components/ory/helpers/error-messages.tsx
@@ -15,7 +15,7 @@ const nodeMessage = ({
 }: {
   text: string
   id: number
-  key: number
+  key: string
 }) => (
   <Message key={key} data-testid={`ui/message/${id}`} severity={"error"}>
     {text}
@@ -29,24 +29,22 @@ export const NodeMessages = ({
   const $groupMessages = nodes?.reduce<JSX.Element[]>(
     (groups, { messages }) => {
       groups = groups.concat(
-        messages.map(({ text, id }) => nodeMessage({ text, id, key: id })),
+        messages.map(({ text, id }, key) =>
+          nodeMessage({ text, id, key: `node-group-message-${id}-${key}` }),
+        ),
       )
       return groups
     },
     [],
   )
 
   const $messages = uiMessages?.map(({ text, id }, key) =>
-    nodeMessage({ text, id, key }),
+    nodeMessage({ text, id, key: `ui-messsage-${id}-${key}` }),
   )
 
-  console.dir({ $groupMessages, $messages })
+  const $allMessages = [...($groupMessages || []), ...($messages || [])]
 
-  return ($messages && $messages.length > 0) ||
-    ($groupMessages && $groupMessages.length > 0) ? (
-    <div className={gridStyle({ gap: 16 })}>
-      {$messages}
-      {$groupMessages}
-    </div>
+  return $allMessages.length > 0 ? (
+    <div className={gridStyle({ gap: 16 })}>{$allMessages}</div>
   ) : null
 }
diff --git a/src/react-components/ory/helpers/node.tsx b/src/react-components/ory/helpers/node.tsx
@@ -155,7 +155,7 @@ export const Node = ({
             required={attrs.required}
             defaultValue={attrs.value}
             disabled={attrs.disabled}
-            checked={Boolean(attrs.value)}
+            defaultChecked={Boolean(attrs.value)}
           />
         )
       default:

diff --git a/src/react-components/ory/user-auth-card.tsx b/src/react-components/ory/user-auth-card.tsx
@@ -169,15 +169,17 @@ export const UserAuthCard = ({
       ),
     ]
       .filter(Boolean) // remove nulls
-      .map((flow, index) =>
-        index > 0 ? (
-          <>
-            <Divider /> {flow}
-          </>
-        ) : (
-          flow
-        ),
-      ) // only map the divider if the index is greater than 0 - more than one flow
+      .map((flow, index) => (
+        <div key={index}>
+          {index > 0 ? (
+            <>
+              <Divider /> {flow}
+            </>
+          ) : (
+            flow
+          )}
+        </div>
+      )) // only map the divider if the index is greater than 0 - more than one flow
 
   switch (flowType) {
     case "login":