fix: match keys everywhere

4 files changed, 6 insertions, 5 deletions

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index bc77bf8..284d3d8 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -12,7 +12,7 @@ const Header: React.FC<Props> = ({ navigation }) => {
   return (
     <header className="bg-black text-white flex">
       {navigation.map(({ name, route }) => (
-        <Link to={route} className="py-6 px-8 font-bold tracking-wide hover:underline">{name}</Link>
+        <Link to={route} key={route} className="py-6 px-8 font-bold tracking-wide hover:underline">{name}</Link>
       ))}
     </header>
   );
diff --git a/src/components/ListTable.tsx b/src/components/ListTable.tsx
index 85b86aa..5c1333a 100644
--- a/src/components/ListTable.tsx
+++ b/src/components/ListTable.tsx
@@ -18,16 +18,17 @@ const ListTable: React.FC<Props> = ({ items = [], fields, handleRowClick = () =>
     <table className="table-auto w-full">
       <thead>
         <tr className="border-b select-none">
-          {fields.map(field => <th>{field.label}</th>)}
+          {fields.map(field => <th key={field.label}>{field.label}</th>)}
         </tr>
       </thead>
       <tbody>
         {items.map((item, index) => (
           <tr
+            key={item._id}
             className={`border-b hover:bg-gray-100 cursor-pointer ${index % 2 && 'bg-gray-50'}`}
             onClick={() => handleRowClick(index)}
           >
-            {fields.map(field => <td className="p-3">{item[field.key]}</td>)}
+            {fields.map(field => <td key={`${item._id} ${field.label}`} className="p-3">{item[field.key]}</td>)}
           </tr>
         ))}
       </tbody>
diff --git a/src/containers/Page.tsx b/src/containers/Page.tsx
index a7c0964..c05ef4b 100644
--- a/src/containers/Page.tsx
+++ b/src/containers/Page.tsx
@@ -16,7 +16,7 @@ const Page: React.FC<Props> = ({ title, actions, children }) => (
     <div className="mb-2 flex justify-between items-center">
       <span className="text-2xl font-bold">{title}</span>
       <div>
-        {actions?.map(action => (<Button {...action} size="sm">{action.name}</Button>))}
+        {actions?.map(action => (<Button {...action} key={action.name} size="sm">{action.name}</Button>))}
       </div>
     </div>
     {children}
diff --git a/src/hooks/useAPIClient.ts b/src/hooks/useAPIClient.ts
index b36cfec..f2f2782 100644
--- a/src/hooks/useAPIClient.ts
+++ b/src/hooks/useAPIClient.ts
@@ -23,7 +23,7 @@ export const useProducts = (options = {}): Response<Product[]> => {
 
 export const useProduct = (_id: string): Response<Product> => {
   const { data: preloadedProducts } = useProducts({ revalidateOnMount: false });
-  const result = useSWR(`/products/${_id}`, fetcher);
+  const result = useSWR(_id && `/products/${_id}`, fetcher);
   if (!result.data && result.isValidating) {
     // If we are waiting for the first result, check if we can maybe
     // get the data from already cached list for the time-being