Add missing keys for loops inside jsx

Georiviere · Nov 12, 2024 · b548b11 · b548b11
1 parent 0d8ad1b
commit b548b11
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/map-filters.tsx b/src/components/map-filters.tsx
@@ -32,8 +32,11 @@ export default function MapFilters() {
     return (
       <div className="bg-background px-3">
         <p className="sr-only">{t('site.loading')}</p>
-        {Array.from({ length: 4 }, () => (
-          <div className="flex w-full justify-between border-b py-4 last:border-b-0">
+        {Array.from({ length: 4 }, (_, index) => (
+          <div
+            key={index}
+            className="flex w-full justify-between border-b py-4 last:border-b-0"
+          >
             <div className="skeleton-animation h-6 w-32 rounded"></div>
             <div className="skeleton-animation h-6 w-12 rounded-xl"></div>
           </div>

diff --git a/src/components/observation-cta.tsx b/src/components/observation-cta.tsx
@@ -36,6 +36,7 @@ export function ObservationCTA() {
               <ul className="m-auto grid grid-cols-2 gap-2 p-6 md:w-[400px]">
                 {observations?.map(observation => (
                   <ListItem
+                    key={observation.id}
                     href={`/map/observation/${
                       observation.id
                     }?${params.toString()}`}
@@ -47,6 +48,7 @@ export function ObservationCTA() {
                 {observations?.length === 0 &&
                   DEFAULT_OBSERVATION_TYPES.map(observation => (
                     <ListItem
+                      key={observation}
                       href={`/map/observation/${observation}?${params.toString()}`}
                       title={t(`${observation}.label`)}
                     >