From 8e55c525a67d2f4c45171df54bd9e2b8e85754c2 Mon Sep 17 00:00:00 2001
From: BriannaVH <vanheckeb@merrimack.edu>
Date: Fri, 30 Jun 2023 13:32:18 -0400
Subject: [PATCH] Got rid of indexing errors with mapping functions

---
 app/src/components/DataRequirements.tsx | 26 ++++++++++++-------------
 app/src/pages/[resourceType]/[id].tsx   |  3 ++-
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/app/src/components/DataRequirements.tsx b/app/src/components/DataRequirements.tsx
index 98f3b621..a0bf03df 100644
--- a/app/src/components/DataRequirements.tsx
+++ b/app/src/components/DataRequirements.tsx
@@ -54,12 +54,12 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
                 <List withPadding>
                   {extension?.map(e => (
                     <>
-                      <List.Item>
+                      <List.Item key={e.url}>
                         <b>URL:</b>
                         {e.url}
                       </List.Item>
-                      {e?.valueString && (
-                        <List.Item>
+                      {e.valueString && (
+                        <List.Item key={e.valueString}>
                           <b> ValueString: </b>
                           {e.valueString}
                         </List.Item>
@@ -74,14 +74,14 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
                       <b>DateFilter(s):</b>
                     </List.Item>
                     <List withPadding>
-                      {dateFilter?.map(data => (
+                      {dateFilter.map(date => (
                         <>
-                          <List.Item>
+                          <List.Item key={date?.valuePeriod?.start}>
                             <b> Start Date: </b>
-                            {data?.valuePeriod?.start} <br />
+                            {date?.valuePeriod?.start} <br />
                           </List.Item>
-                          <List.Item>
-                            <b> End Date: </b> {data?.valuePeriod?.end} <br />
+                          <List.Item key={date?.valuePeriod?.end}>
+                            <b> End Date: </b> {date?.valuePeriod?.end} <br />
                           </List.Item>
                         </>
                       ))}
@@ -101,12 +101,12 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
                       {codes.map(codeInterface => (
                         <>
                           {codeInterface.code && (
-                            <List.Item>
-                              <b> Code: </b> {codeInterface?.code} <br />
+                            <List.Item key={codeInterface.code}>
+                              <b> Code: </b> {codeInterface.code} <br />
                             </List.Item>
                           )}
                           {codeInterface.system && (
-                            <List.Item>
+                            <List.Item key={codeInterface.system}>
                               <b> System: </b> {codeInterface?.system} <br />
                             </List.Item>
                           )}
@@ -122,8 +122,8 @@ function DataRequirements({ type, extension, dateFilter, codeFilter }: fhir4.Dat
                       <b>Value Set(s):</b>
                     </List.Item>
                     <List withPadding>
-                      {codeFiltersWithVS.map(c => (
-                        <List.Item>
+                      {codeFiltersWithVS.map((c, index) => (
+                        <List.Item key={index}>
                           {c.valueSet} <br />
                         </List.Item>
                       ))}
diff --git a/app/src/pages/[resourceType]/[id].tsx b/app/src/pages/[resourceType]/[id].tsx
index 7169804f..a6d782f8 100644
--- a/app/src/pages/[resourceType]/[id].tsx
+++ b/app/src/pages/[resourceType]/[id].tsx
@@ -200,8 +200,9 @@ export default function ResourceIDPage({ jsonData }: InferGetServerSidePropsType
               )}
               <ScrollArea.Autosize mah={height * 0.8} type="always">
                 {dataReqsView === 'formatted' &&
-                  dataRequirements?.dataRequirement.map(data => (
+                  dataRequirements?.dataRequirement.map((data: fhir4.DataRequirement, index: any) => (
                     <DataReqs
+                      key={index}
                       type={data.type}
                       codeFilter={data.codeFilter}
                       dateFilter={data.dateFilter}