SatcherInstitute · benhammondmusic · Sep 25, 2024 · Sep 25, 2024 · Sep 25, 2024 · Sep 25, 2024
diff --git a/frontend/src/charts/AgeAdjustedTableChart.tsx b/frontend/src/charts/AgeAdjustedTableChart.tsx
@@ -148,12 +148,15 @@ export function AgeAdjustedTableChart(props: AgeAdjustedTableChartProps) {
             <Table {...getTableProps()}>
               <TableHead>
                 {headerGroups.map((group, index) => (
-                  <TableHeaderRow group={group} key={index} />
+                  <TableHeaderRow
+                    group={group}
+                    key={group.id || `group-${index}`}
+                  />
                 ))}
               </TableHead>
               <TableBody {...getTableBodyProps()}>
                 {rows.map((row: ReactTableRowType<any>, index) => (
-                  <TableDataRow row={row} key={index} />
+                  <TableDataRow row={row} key={row.id || `row-${index}`} />
                 ))}
               </TableBody>
               <TableFooter>

diff --git a/frontend/src/charts/TableChart.tsx b/frontend/src/charts/TableChart.tsx
@@ -235,12 +235,15 @@ export function TableChart(props: TableChartProps) {
             <Table {...getTableProps()}>
               <TableHead>
                 {headerGroups.map((group, index) => (
-                  <TableHeaderRow group={group} key={index} />
+                  <TableHeaderRow
+                    group={group}
+                    key={group.id || `group-${index}`}
+                  />
                 ))}
-              </TableHead>
+              </TableHead>{' '}
               <TableBody {...getTableBodyProps()}>
                 {page.map((row: ReactTableRowType<any>, index) => (
-                  <TableDataRow row={row} key={index} />
+                  <TableDataRow row={row} key={row.id || `row-${index}`} />
                 ))}
               </TableBody>
               {/* If the number of rows is less than the smallest page size, we can hide pagination */}

diff --git a/frontend/src/pages/DataCatalog/DataCatalogPage.tsx b/frontend/src/pages/DataCatalog/DataCatalogPage.tsx
@@ -91,7 +91,7 @@ export default function DataCatalogPage() {
               return (
                 <>
                   {filteredDatasets.map((sourceId, index) => (
-                    <li key={index}>
+                    <li key={sourceId}>
                       <DataSourceListing
                         key={dataSourceMetadataMap[sourceId].id}
                         source_metadata={dataSourceMetadataMap[sourceId]}

diff --git a/frontend/src/pages/ExploreData/DefaultHelperBox.tsx b/frontend/src/pages/ExploreData/DefaultHelperBox.tsx
@@ -31,8 +31,7 @@ export default function DefaultHelperBox() {
             {reportMappings.map((report, index) => (
               <li
                 className='my-4 xs:my-2 mx-0 flex flex-col bg-white rounded-md hover:shadow-raised group border border-solid border-altGreen transition-all duration-300 ease-in-out w-full'
-                key={index}
-                role='listitem'
+                key={report.title}
               >
                 <article
                   className='text-left p-4 text-altGreen grid gap-4 md:items-start place-items-center md:grid-cols-[40%_60%] w-full'

diff --git a/frontend/src/pages/ExploreData/MadLibUI.tsx b/frontend/src/pages/ExploreData/MadLibUI.tsx
@@ -131,7 +131,13 @@ export default function MadLibUI(props: MadLibUIProps) {
               )
 
               return (
-                <React.Fragment key={index}>
+                <React.Fragment
+                  key={
+                    typeof phraseSegment === 'string'
+                      ? phraseSegment
+                      : `phrase-${index}`
+                  }
+                >
                   {typeof phraseSegment === 'string' ? (
                     // NON_INTERACTIVE MADLIB WORDS
                     <span className='text-altBlack'>

diff --git a/frontend/src/pages/Methodology/methodologyComponents/CodeBlock.tsx b/frontend/src/pages/Methodology/methodologyComponents/CodeBlock.tsx
@@ -34,7 +34,14 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
         <TableHead>
           <TableRow>
             {rowData.map((cell, index) => (
-              <TableCell className='flex content-baseline' key={index}>
+              <TableCell
+                className='flex content-baseline'
+                key={
+                  typeof cell.content === 'string'
+                    ? cell.content
+                    : `cell-${index}`
+                }
+              >
                 <pre className='mx-auto my-0 border-none bg-opacity-0'>
                   {cell.content}
                 </pre>

diff --git a/frontend/src/pages/Methodology/methodologyComponents/FormulaFormat.tsx b/frontend/src/pages/Methodology/methodologyComponents/FormulaFormat.tsx
@@ -21,8 +21,15 @@ export default function FormulaFormat(props: FormulaFormatProps) {
         </div>
         <div className='px-2 py-1'>{' = '}</div>
 
-        {props.rightSide.map((item, index) => (
-          <div className='p-2' key={index}>
+        {props.rightSide.map((item) => (
+          <div
+            className='p-2'
+            key={
+              typeof item === 'string'
+                ? item
+                : `${item.numerator}-${item.denominator}`
+            }
+          >
             {typeof item === 'string' ? (
               item
             ) : (

diff --git a/frontend/src/pages/Methodology/methodologyComponents/GlossaryTerm.tsx b/frontend/src/pages/Methodology/methodologyComponents/GlossaryTerm.tsx
@@ -26,13 +26,13 @@ export default function GlossaryTerm(props: GlossaryTermProps) {
 
   return (
     <>
-      {sortedDefinitionItems.map(([itemKey, itemVal], index) => {
+      {sortedDefinitionItems.map(([itemKey, itemVal]) => {
         const glossaryDefinition = itemVal.definitions.find(
           (def) => def.key === 'Measurement Definition',
         )?.description
 
         return (
-          <div key={index} className='mx-auto my-4'>
+          <div key={itemKey} className='mx-auto my-4'>
             <h4 className='mx-auto mb-0 mt-1 font-sansTitle text-text font-medium text-altGreen '>
               {itemKey}
             </h4>

diff --git a/frontend/src/pages/Methodology/methodologySections/BehavioralHealthLink.tsx b/frontend/src/pages/Methodology/methodologySections/BehavioralHealthLink.tsx
@@ -94,7 +94,7 @@ export default function BehavioralHealthLink() {
           rows={behavioralHealthDataSources.map((source, index) => ({
             source: (
               <a
-                key={index}
+                key={source.data_source_name}
                 href={`${DATA_CATALOG_PAGE_LINK}?${DATA_SOURCE_PRE_FILTERS}=${source.id}`}
               >
                 {source.data_source_name}

diff --git a/frontend/src/pages/Methodology/methodologySections/ChronicDiseaseLink.tsx b/frontend/src/pages/Methodology/methodologySections/ChronicDiseaseLink.tsx
@@ -89,7 +89,7 @@ const ChronicDiseaseLink = () => {
           rows={chronicDiseaseDataSources.map((source, index) => ({
             source: (
               <a
-                key={index}
+                key={source.data_source_name}
                 href={`${DATA_CATALOG_PAGE_LINK}?${DATA_SOURCE_PRE_FILTERS}=${source.id}`}
               >
                 {source.data_source_name}

diff --git a/frontend/src/pages/Methodology/methodologySections/CommunitySafetyLink.tsx b/frontend/src/pages/Methodology/methodologySections/CommunitySafetyLink.tsx
@@ -178,7 +178,7 @@ const CommunitySafetyLink = () => {
           rows={communitySafetyDataSources.map((source, index) => ({
             source: (
               <a
-                key={index}
+                key={source.data_source_name}
                 href={`${DATA_CATALOG_PAGE_LINK}?${DATA_SOURCE_PRE_FILTERS}=${source.id}`}
               >
                 {source.data_source_name}

diff --git a/frontend/src/pages/Methodology/methodologySections/Covid19Link.tsx b/frontend/src/pages/Methodology/methodologySections/Covid19Link.tsx
@@ -302,7 +302,7 @@ export default function Covid19Link() {
           rows={covidDataSources.map((source, index) => ({
             source: (
               <a
-                key={index}
+                key={source.data_source_name}
                 href={`${DATA_CATALOG_PAGE_LINK}?${DATA_SOURCE_PRE_FILTERS}=${source.id}`}
               >
                 {source.data_source_name}

diff --git a/frontend/src/pages/Methodology/methodologySections/HivLink.tsx b/frontend/src/pages/Methodology/methodologySections/HivLink.tsx
@@ -571,7 +571,7 @@ const HivLink = () => {
           rows={hivDataSources.map((source, index) => ({
             source: (
               <a
-                key={index}
+                key={source.data_source_name}
                 href={`${DATA_CATALOG_PAGE_LINK}?${DATA_SOURCE_PRE_FILTERS}=${source.id}`}
               >
                 {source.data_source_name}

diff --git a/frontend/src/pages/Methodology/methodologySections/MedicationUtilizationLink.tsx b/frontend/src/pages/Methodology/methodologySections/MedicationUtilizationLink.tsx
@@ -415,7 +415,7 @@ export default function MedicareMedicationLink() {
           rows={medicareMedicationDataSources.map((source, index) => ({
             source: (
               <a
-                key={index}
+                key={source.data_source_name}
                 href={`${DATA_CATALOG_PAGE_LINK}?${DATA_SOURCE_PRE_FILTERS}=${source.id}`}
               >
                 {source.data_source_name}

diff --git a/frontend/src/pages/Methodology/methodologySections/PdohLink.tsx b/frontend/src/pages/Methodology/methodologySections/PdohLink.tsx
@@ -369,7 +369,7 @@ const PdohLink = () => {
           rows={pdohDataSources.map((source, index) => ({
             source: (
               <a
-                key={index}
+                key={source.data_source_name}
                 href={`${DATA_CATALOG_PAGE_LINK}?${DATA_SOURCE_PRE_FILTERS}=${source.id}`}
               >
                 {source.data_source_name}

diff --git a/frontend/src/pages/Methodology/methodologySections/SdohLink.tsx b/frontend/src/pages/Methodology/methodologySections/SdohLink.tsx
@@ -97,7 +97,7 @@ function SdohLink() {
           rows={sdohDataSources.map((source, index) => ({
             source: (
               <a
-                key={index}
+                key={source.data_source_name}
                 href={`${DATA_CATALOG_PAGE_LINK}?${DATA_SOURCE_PRE_FILTERS}=${source.id}`}
               >
                 {source.data_source_name}

diff --git a/frontend/src/pages/Policy/policySections/CrisisOverviewTab.tsx b/frontend/src/pages/Policy/policySections/CrisisOverviewTab.tsx
@@ -52,15 +52,16 @@ export default function CrisisOverviewTab() {
             {rocketFoundationFacts.map((rocketFoundationFact, index) => {
               const isMobileShadow = !isMdAndUp && index % 2 === 0
               const isDesktopShadow = isMdAndUp && index % 2 !== 0
-
+              const uniqueKey = `fact-${index}`
+
               return (
                 <div
-                  key={index}
+                  key={uniqueKey}
                   className={`fade-in-up-blur rounded-md p-8 ${isMobileShadow || isDesktopShadow ? 'shadow-raised-tighter' : ''}`}
                   style={{ animationDelay: `${index * 0.1}s` }}
                 >
                   <FactCard
-                    key={index}
+                    key={uniqueKey}
                     content={rocketFoundationFact.content}
                   />
                 </div>
@@ -80,9 +81,11 @@ export default function CrisisOverviewTab() {
 
           <ul className='list-none pl-0 grid gap-4 md:grid-cols-2 grid-cols-1 pt-2 pb-4 my-0'>
             {gvaFacts.map((gvaFact, index) => {
+              const uniqueKey = `fact-${index}`
+
               return (
                 <li
-                  key={index}
+                  key={uniqueKey}
                   className={`fade-in-up-blur ${index % 2 === 0 ? 'shadow-raised-tighter' : null}`}
                   style={{ animationDelay: `${index * 0.1}s` }}
                 >

diff --git a/frontend/src/pages/Policy/policySections/HowToUseTheDataTab.tsx b/frontend/src/pages/Policy/policySections/HowToUseTheDataTab.tsx
@@ -30,7 +30,7 @@ export default function HowToUseTheDataTab() {
       </section>
       {dataVisuals.map((dataVisual, index) => (
         <section
-          key={index}
+          key={dataVisual.sectionId}
           id={dataVisual.sectionId}
           className='max-w-svw w-auto mx-0 px-0'
         >

diff --git a/frontend/src/pages/Policy/policySections/ReformOpportunitiesTab.tsx b/frontend/src/pages/Policy/policySections/ReformOpportunitiesTab.tsx
@@ -41,14 +41,14 @@ export default function ReformOpportunitiesTab() {
 
             return (
               <div
-                key={index}
+                key={effortsAndInsight.title}
                 className={`fade-in-up-blur rounded-md p-8 ${
                   isMobileShadow || isDesktopShadow ? 'shadow-raised' : ''
                 }`}
                 style={{ animationDelay: `${index * 0.04}s` }}
               >
                 <CardLeftIcon
-                  key={index}
+                  key={effortsAndInsight.title}
                   icon={effortsAndInsight.icon}
                   title={effortsAndInsight.title}
                   description={effortsAndInsight.description}

diff --git a/frontend/src/pages/WhatIsHealthEquity/EquityTab.tsx b/frontend/src/pages/WhatIsHealthEquity/EquityTab.tsx
@@ -207,9 +207,9 @@ export default function EquityTab() {
                   ) : (
                     <>
                       <div className='grid md:grid-cols-2 gap-6 xs:grid-cols-1'>
-                        {NEWS_ARTICLES.slice(0, 2).map((article, index) => (
+                        {NEWS_ARTICLES.slice(0, 2).map((article) => (
                           <EquityTabNewsCard
-                            key={index}
+                            key={article.title}
                             href={article.href}
                             ariaLabel={article.ariaLabel}
                             imgSrc={article.imgSrc}
@@ -221,9 +221,9 @@ export default function EquityTab() {
                         ))}
                       </div>
                       <div className='grid md:grid-cols-3 gap-6 xs:grid-cols-1 mt-6'>
-                        {NEWS_ARTICLES.slice(2).map((article, index) => (
+                        {NEWS_ARTICLES.slice(2).map((article) => (
                           <EquityTabNewsCard
-                            key={index}
+                            key={article.title}
                             href={article.href}
                             ariaLabel={article.ariaLabel}
                             imgSrc={article.imgSrc}

diff --git a/frontend/src/styles/HetComponents/HetTags.tsx b/frontend/src/styles/HetComponents/HetTags.tsx
@@ -5,10 +5,10 @@ interface HetTagsProps {
 export const HetTags: React.FC<HetTagsProps> = ({ tags }) => {
   return (
     <div className='md:flex md:flex-wrap mt-2 hidden'>
-      {tags.map((name, index) => (
+      {tags.map((name) => (
         <span
           aria-label={name}
-          key={index}
+          key={name}
           className='text-tinyTag uppercase text-altBlack font-sansTitle font-bold bg-ashgray30 rounded-sm py-1 px-2 mr-2 mt-1'
         >
           {name}