Add missing keys

Add missing `key` props to resolve React errors.
georgetown-cset · Oct 16, 2023 · ec8d49a · ec8d49a
1 parent f2a4f18
commit ec8d49a
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 7 deletions.
diff --git a/web/gui-v2/src/components/DetailView.jsx b/web/gui-v2/src/components/DetailView.jsx
@@ -100,10 +100,10 @@ const DetailView = ({
 
   if ( companyData ) {
     const breadcrumbs = [
-      <GatsbyLink to="/#table">
+      <GatsbyLink to="/#table" key="root">
         ETO PARAT
       </GatsbyLink>,
-      <Typography>
+      <Typography key={companyId}>
         {companyData.name}
       </Typography>
     ];

diff --git a/web/gui-v2/src/components/DetailViewIntro.jsx b/web/gui-v2/src/components/DetailViewIntro.jsx
@@ -69,7 +69,7 @@ const DetailViewIntro = ({
   if ( data.market_filt && data.market_filt.length > 0 ) {
     metadata.push({
       title: "Stock tickers",
-      value: data.market_filt.map((e) => <ExternalLink href={e.link}>{e.market_key}</ExternalLink>),
+      value: data.market_filt.map((e) => <ExternalLink href={e.link} key={e.market_key}>{e.market_key}</ExternalLink>),
     });
   }
 

diff --git a/web/gui-v2/src/components/DetailViewMoreMetadataDialog.jsx b/web/gui-v2/src/components/DetailViewMoreMetadataDialog.jsx
@@ -67,13 +67,13 @@ const MoreMetadataDialog = ({
       title: 'Crunchbase',
       value: <div css={styles.linkWrapper}>
         <ExternalLink href={data.crunchbase.crunchbase_url}>{data.crunchbase.crunchbase_url}</ExternalLink>
-        {data.child_crunchbase.map(e => <ExternalLink href={e.crunchbase_url}>{e.crunchbase_url}</ExternalLink>)}
+        {data.child_crunchbase.map(e => <ExternalLink href={e.crunchbase_url} key={e.crunchbase_url}>{e.crunchbase_url}</ExternalLink>)}
       </div>
     },
     {
       title: 'LinkedIn',
       value: <div css={styles.linkWrapper}>
-        {data.linkedin.map(e => <ExternalLink href={e}>{e}</ExternalLink>)}
+        {data.linkedin.map(e => <ExternalLink href={e} key={e}>{e}</ExternalLink>)}
       </div>
     },
     { title: 'In S&P 500?', value: data.in_sandp_500 ? 'Yes' : 'No' },

diff --git a/web/gui-v2/src/components/DetailViewPatents.jsx b/web/gui-v2/src/components/DetailViewPatents.jsx
@@ -55,18 +55,22 @@ const DetailViewPatents = ({
 
   const statGridEntries = [
     {
+      key: "ai-patents",
       stat: <>#{commas(data.patents.ai_patents.rank)}</>,
       text: <>in PARAT for number of AI-related patents</>,
     },
     {
+      key: "ai-patent-growth",
       stat: <>NUM%</>,
       text: <>growth in {data.name}'s AI patenting ({yearSpanNdash})</>,
     },
     {
+      key: "ai-patent-applications",
       stat: <>NUM</>,
       text: <div>AI patent <strong>applications</strong> were filed by {data.name} ({yearSpanNdash})</div>,
     },
     {
+      key: "ai-focused-percent",
       stat: <>NUM%</>,
       text: <>of {data.name}'s total patenting was AI-focused</>,
     },

diff --git a/web/gui-v2/src/components/DetailViewPublications.jsx b/web/gui-v2/src/components/DetailViewPublications.jsx
@@ -61,26 +61,32 @@ const DetailViewPublications = ({
 
   const statGridEntries = [
     {
+      key: "ai-papers",
       stat: <>#{data.articles.ai_publications.rank}</>,
       text: <>in PARAT for number of AI research articles</>,
     },
     {
+      key: "average-citations",
       stat: <>{averageCitations}</>,
       text: <>citations per article on average (#RANK in PARAT, #RANK in the S&P 500)</>,
     },
     {
+      key: "highly-cited",
       stat: <>NUMBER</>,
       text: <>highly-cited articles (#RANK in PARAT, #RANK in the S&P 500)</>,
     },
     {
+      key: "ai-research-growth",
       stat: <>NUM%</>,
       text: <>growth in {data.name}'s public AI research ({yearSpanNdash})</>,
     },
     {
+      key: "ai-top-conf",
       stat: <>{commas(data.articles.ai_pubs_top_conf.total)}</>,
       text: <>articles at top AI conferences (#{data.articles.ai_pubs_top_conf.rank} in PARAT, #RANK in the S&P 500)</>,
     },
     {
+      key: "ai-research-percent",
       stat: <>{aiResearchPercent}%</>,
       text: <>of {data.name}'s total public research was AI-focused</>,
     },

diff --git a/web/gui-v2/src/components/StatGrid.jsx b/web/gui-v2/src/components/StatGrid.jsx
@@ -62,7 +62,7 @@ const StatGrid = ({
       {
         entries.map((entry) => {
           return (
-            <li key={entry.text}>
+            <li key={entry.key ?? entry.text}>
               <div>{entry.stat}</div>
               <div>{entry.text}</div>
             </li>

diff --git a/web/gui-v2/src/components/TwoColumnTable.jsx b/web/gui-v2/src/components/TwoColumnTable.jsx
@@ -56,7 +56,7 @@ const TwoColumnTable = ({
     >
       <tbody>
         {data.map((row) => (
-          <tr>
+          <tr key={row.title}>
             <th scope="row">{row.title}</th>
             <td>{row.value ?? <span css={styles.notFound}>None found</span>}</td>
           </tr>