Key

Author: Dmitry Yadrikhinsky

src/helpers/IterateLastCurrent.ts

@@ -1,4 +1,4 @@
-type Callback<T, R> = (last: T | undefined, cur: T) => R;
+type Callback<T, R> = (last: T | undefined, cur: T, index: number) => R;
 
 export function mapLastCurrent<T, R = any>(
   items: T[],
@@ -7,9 +7,9 @@ export function mapLastCurrent<T, R = any>(
   const result: R[] = [];
   for (let i = 0; i < items.length; i++) {
     if (i === 0) {
-      result.push(callback(undefined, items[i]));
+      result.push(callback(undefined, items[i], i));
     } else {
-      result.push(callback(items[i - 1], items[i]));
+      result.push(callback(items[i - 1], items[i], i));
     }
   }
   return result;

src/screens/projects/components/HoursByTask/HoursByTask.tsx

@@ -27,16 +27,16 @@ export default function HoursByTask({ task }: HoursByTaskProps) {
           <BellFilled style={{ color: 'white' }} />
         </IconTile>
         {task?.time.length === 0 && <div>No billed hours</div>}
-        {mapLastCurrent(task?.time || [], (last, range) => {
+        {mapLastCurrent(task?.time || [], (last, range, index) => {
           if (!last || !isSameDay(last[0], range[0])) {
             return (
-              <div>
+              <div key={index}>
                 <div className="date">{dateFormat(range[0])}</div>
                 <HoursItem range={range} />
               </div>
             );
           }
-          return <HoursItem range={range} />;
+          return <HoursItem key={index} range={range} />;
         })}
       </Space>
     </Card>