More robust undefined behaviour

Author: WaltNuber

templates/next/components/common/ReferenceLinks.tsx

@@ -2,10 +2,20 @@ import Link from "next/link";
 import { Fragment, FunctionComponent } from "react";
 
 interface Props {
-  items: string | string[] | { href: string; name: string } | { href: string; name: string }[];
+  items:
+    | string
+    | string[]
+    | { href: string; name: string | undefined }
+    | { href: string; name: string | undefined }[]
+    | null
+    | undefined;
 }
 
 const ReferenceLinks: FunctionComponent<Props> = ({ items }) => {
+  if (!items) {
+    return null;
+  }
+
   if (Array.isArray(items)) {
     return (
       <Fragment>
@@ -23,7 +33,7 @@ const ReferenceLinks: FunctionComponent<Props> = ({ items }) => {
       href={typeof items === "string" ? items : items.href}
       className="text-cyan-700 font-bold"
     >
-      {typeof items === "string" ? items : items.name}
+      {typeof items === "string" ? items : items.name || items.href}
     </Link>
   );
 };

templates/next/components/foo/List.tsx

@@ -40,13 +40,17 @@ export const List: FunctionComponent<Props> = ({ {{{lc}}}s }) => (
             {{#each fields}}
               <td>
                 {{#if isReferences}}
-                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((ref: any) => ({ href: getItemPath(ref, '/{{{lowercase reference.title}}}s/[id]'), name: ref })) } />
+                  { {{{../lc}}}['{{{name}}}'] && (
+                    <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((ref: any) => ({ href: getItemPath(ref, '/{{{lowercase reference.title}}}s/[id]'), name: ref })) } />
+                  )}
                 {{else if reference}}
                   <ReferenceLinks items={ { href: getItemPath({{{../lc}}}['{{{name}}}'], '/{{{lowercase reference.title}}}s/[id]'), name: {{{../lc}}}['{{{name}}}'] } } />
                 {{else if isEmbeddeds}}
-                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((emb: any) => ({ href: getItemPath(emb['@id'], '/{{{lowercase embedded.title}}}s/[id]'), name: emb['@id'] })) } />
+                  { {{{../lc}}}['{{{name}}}'] && (
+                    <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((emb: any) => ({ href: getItemPath(emb['@id'], '/{{{lowercase embedded.title}}}s/[id]'), name: emb['@id'] })) } />
+                  )}
                 {{else if embedded}}
-                  <ReferenceLinks items={ { href: getItemPath({{{../lc}}}['{{{name}}}']['@id'], '/{{{lowercase embedded.title}}}s/[id]'), name: {{{../lc}}}['{{{name}}}']['@id'] } } />
+                  <ReferenceLinks items={ { href: getItemPath({{{../lc}}}['{{{name}}}']?.['@id'], '/{{{lowercase embedded.title}}}s/[id]'), name: {{{../lc}}}['{{{name}}}']?.['@id'] } } />
                 {{else if (compare type "==" "Date") }}
                   { {{{../lc}}}['{{{name}}}']?.toLocaleString() }
                 {{else}}

templates/next/components/foo/Show.tsx

@@ -55,13 +55,17 @@ export const Show: FunctionComponent<Props> = ({ {{{lc}}}, text }) => {
             <th scope="row">{{name}}</th>
             <td>
               {{#if isReferences}}
-                <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((ref: any) => ({ href: getItemPath(ref, '/{{{lowercase reference.title}}}s/[id]'), name: ref })) } />
+                { {{{../lc}}}['{{{name}}}'] && (
+                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((ref: any) => ({ href: getItemPath(ref, '/{{{lowercase reference.title}}}s/[id]'), name: ref })) } />
+                )}
               {{else if reference}}
                 <ReferenceLinks items={ { href: getItemPath({{{../lc}}}['{{{name}}}'], '/{{{lowercase reference.title}}}s/[id]'), name: {{{../lc}}}['{{{name}}}'] } } />
               {{else if isEmbeddeds}}
-                <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((emb: any) => ({ href: getItemPath(emb['@id'], '/{{{lowercase embedded.title}}}s/[id]'), name: emb['@id'] })) } />
+                { {{{../lc}}}['{{{name}}}'] && (
+                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((emb: any) => ({ href: getItemPath(emb['@id'], '/{{{lowercase embedded.title}}}s/[id]'), name: emb['@id'] })) } />
+                )}
               {{else if embedded}}
-                <ReferenceLinks items={ { href: getItemPath({{{../lc}}}['{{{name}}}']['@id'], '/{{{lowercase embedded.title}}}s/[id]'), name: {{{../lc}}}['{{{name}}}']['@id'] } } />
+                <ReferenceLinks items={ { href: getItemPath({{{../lc}}}['{{{name}}}']?.['@id'], '/{{{lowercase embedded.title}}}s/[id]'), name: {{{../lc}}}['{{{name}}}']?.['@id'] } } />
               {{else if (compare type "==" "Date") }}
                 { {{{../lc}}}['{{{name}}}']?.toLocaleString() }
               {{else}}