Adds unique keys to itteratbles, remove react warn

src/components/Form/Row.tsx

@@ -159,7 +159,7 @@ export const ExpandableRow = (props: RowProps) => {
           { rowList?.map((row: RowProps, index: number) => {
             return (
               <SubRow key={`${row.lbl}-${index}`}>
-                <span className="lbl" title={row.title}>{row.lbl}</span>
+                <span className="lbl" title={row.title?.toString()}>{row.lbl}</span>
                 <span className="val" title={row.val} onClick={() => copyToClipboard(row.val)}>
                   {formatValue(row.val)}
                 </span>
@@ -199,7 +199,7 @@ const Row = (props: RowProps) => {
   if (children) return <StyledRow key={`${lbl}-${val}`}>{children}</StyledRow>;
   return (
   <StyledRow key={`${lbl}-${val}`}>
-    { lbl && <span className="lbl" title={title}>{lbl}</span> }
+    { lbl && <span className="lbl" title={title?.toString()}>{lbl}</span> }
     <span className="val" title={val} onClick={() => copyToClipboard(val)}>
       {formatValue(val)}
     </span>

src/components/Results/BlockLists.tsx

@@ -6,11 +6,13 @@ const BlockListsCard = (props: {data: any, title: string, actionButtons: any }):
   const blockLists = props.data.blocklists;
   return (
     <Card heading={props.title} actionButtons={props.actionButtons}>
-      { blockLists.map((blocklist: any) => (
+      { blockLists.map((blocklist: any, blockIndex: number) => (
         <Row
           title={blocklist.serverIp}
           lbl={blocklist.server}
-          val={blocklist.isBlocked ? '❌ Blocked' : '✅ Not Blocked'} />
+          val={blocklist.isBlocked ? '❌ Blocked' : '✅ Not Blocked'}
+          key={`blocklist-${blockIndex}-${blocklist.serverIp}`}
+        />
       ))}
     </Card>
   );

src/components/Results/DnsServer.tsx

@@ -18,12 +18,12 @@ const DnsServerCard = (props: {data: any, title: string, actionButtons: any }):
   return (
     <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
       {dnsSecurity.dns.map((dns: any, index: number) => {
-        return (<>
+        return (<div key={`dns-${index}`}>
           { dnsSecurity.dns.length > 1 && <Heading as="h4" size="small" color={colors.primary}>DNS Server #{index+1}</Heading> }
           <Row lbl="IP Address" val={dns.address} key={`ip-${index}`} />
           { dns.hostname && <Row lbl="Hostname" val={dns.hostname}  key={`host-${index}`} /> }
           <Row lbl="DoH Support" val={dns.dohDirectSupports ? '✅ Yes*' : '❌ No*'} key={`doh-${index}`} />
-        </>);
+        </div>);
       })}
       {dnsSecurity.dns.length > 0 && (<small>
         * DoH Support is determined by the DNS server's response to a DoH query.

src/components/Results/ServerStatus.tsx

@@ -13,7 +13,7 @@ span.val {
 const ServerStatusCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
   const serverStatus = props.data;
   return (
-    <Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
+    <Card heading={props.title.toString()} actionButtons={props.actionButtons} styles={cardStyles}>
       <Row lbl="" val="">
         <span className="lbl">Is Up?</span>
         { serverStatus.isUp ? <span className="val up">✅ Online</span> : <span className="val down">❌ Offline</span>}

src/components/Results/TlsCipherSuites.tsx

@@ -52,7 +52,7 @@ const TlsCard = (props: {data: any, title: string, actionButtons: any }): JSX.El
     <Card heading={props.title} actionButtons={props.actionButtons}>
       { cipherSuites.length && cipherSuites.map((cipherSuite: any, index: number) => {
         return (
-          <ExpandableRow lbl={cipherSuite.title} val="" rowList={cipherSuite.fields} />
+          <ExpandableRow key={`tls-${index}`} lbl={cipherSuite.title} val="" rowList={cipherSuite.fields} />
         );
       })}
       { !cipherSuites.length && (

src/components/Results/TlsClientSupport.tsx

@@ -59,8 +59,15 @@ const TlsCard = (props: {data: any, title: string, actionButtons: any }): JSX.El
   const scanId = props.data?.id;
   return (
     <Card heading={props.title} actionButtons={props.actionButtons}>
-      {clientSupport.map((support: any) => {
+      {clientSupport.map((support: any, index: number) => {
-        return (<ExpandableRow lbl={support.title} val={support.value || '?'} rowList={support.fields} />)
+        return (
+        <ExpandableRow
+          key={`tls-client-${index}`}
+          lbl={support.title}
+          val={support.value || '?'}
+          rowList={support.fields}
+        />
+      )
       })}
       { !clientSupport.length && (
         <div>

src/components/Results/TlsIssueAnalysis.tsx

@@ -99,7 +99,13 @@ const TlsCard = (props: {data: any, title: string, actionButtons: any }): JSX.El
     <Card heading={props.title} actionButtons={props.actionButtons}>
       { tlsResults.length > 0 && tlsResults.map((row: any, index: number) => {
         return (
-          <Row lbl={row.lbl} val={row.val} plaintext={row.plaintext} listResults={row.list} />
+          <Row
+            lbl={row.lbl}
+            val={row.val}
+            plaintext={row.plaintext}
+            listResults={row.list}
+            key={`tls-issues-${index}`}
+          />
         );
       })}
       <Expandable>

src/components/misc/ErrorBoundary.tsx

@@ -7,6 +7,7 @@ import colors from 'styles/colors';
 interface Props {
   children: ReactNode;
   title?: string;
+  key?: string;
 }
 
 interface State {