diff options
| -rw-r--r-- | src/components/Header.tsx | 2 | ||||
| -rw-r--r-- | src/components/ListTable.tsx | 5 | ||||
| -rw-r--r-- | src/containers/Page.tsx | 2 | ||||
| -rw-r--r-- | src/hooks/useAPIClient.ts | 2 |
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 |