Fix keys on dashboard components (#728)

ShokoAnime · Dec 22, 2023 · f22f5c4 · f22f5c4
1 parent f74110d
commit f22f5c4
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/pages/dashboard/panels/CollectionStats.tsx b/src/pages/dashboard/panels/CollectionStats.tsx
@@ -9,9 +9,9 @@ import { useDashbordStatsQuery } from '@/core/react-query/dashboard/queries';
 import type { RootState } from '@/core/store';
 
 const Item = (
-  { key, link, title, value = 0 }: { key: string, title: string, value?: string | number, link?: string },
+  { link, title, value = 0 }: { title: string, value?: string | number, link?: string },
 ) => (
-  <div key={key} className="flex">
+  <div className="flex">
     <div className="mb-1 grow last:mb-0">
       {title}
     </div>

diff --git a/src/pages/dashboard/panels/MediaType.tsx b/src/pages/dashboard/panels/MediaType.tsx
@@ -30,7 +30,7 @@ const getColor = (type: string) => {
 
 const Item = ({ count, countPercentage, item }: { count: number, countPercentage: number, item: string }) => (
   <>
-    <div key={`${item}-name`} className="mt-5 flex first:mt-0">
+    <div className="mt-5 flex first:mt-0">
       <span className="grow">
         {names[item] ?? item}
         &nbsp;-&nbsp;
@@ -42,7 +42,7 @@ const Item = ({ count, countPercentage, item }: { count: number, countPercentage
         %
       </span>
     </div>
-    <div key={`${item}-bar`} className="mt-2 flex rounded-md bg-panel-input">
+    <div className="mt-2 flex rounded-md bg-panel-input">
       {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
       <div className={`bg-${getColor(item)} h-4 rounded-md`} style={{ width: `${countPercentage}%` }} />
     </div>
@@ -70,7 +70,7 @@ function MediaType() {
     if (total) {
       countPercentage = (item[1] / total) * 100;
     }
-    items.push(<Item item={item[0]} count={item[1]} countPercentage={countPercentage} />);
+    items.push(<Item key={item[0]} item={item[0]} count={item[1]} countPercentage={countPercentage} />);
   });
 
   return (