Adding missing keys

src/refactor/ui/components/gallery/Gallery.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { GalleryItem } from './GalleryItem';
 import { Tab } from './Tab';
 import { TabsInterface } from '../../../masa';
@@ -11,18 +11,21 @@ export interface GalleryProps {
 export const Gallery = ({ tabs, wrapperClassName }: GalleryProps) => {
   const [activeTab, setActiveTab] = useState(0);
 
+  const handleActive = useCallback((index: number) => {
+    setActiveTab(index);
+  }, []);
+
   return (
     <article className="tabs-container">
       <header className="tabs-header">
         <nav className="tabs-wrapper">
           <ul className="tabs" data-active-tab={activeTab}>
             {tabs.map((tab, index) => (
-              <li>
+              <li key={`list-header-tab-${tab.title}`}>
                 <Tab
-                  key={`header-tab-${tab.title}`}
                   title={tab.title}
                   active={activeTab === index}
-                  onClick={() => setActiveTab(index)}
+                  onClick={() => handleActive(index)}
                 />
               </li>
             ))}
@@ -31,7 +34,7 @@ export const Gallery = ({ tabs, wrapperClassName }: GalleryProps) => {
       </header>
       <section className={`tab-content ${wrapperClassName}`}>
         {tabs[activeTab].items.map((tab) => {
-          return <GalleryItem {...tab} />;
+          return <GalleryItem {...tab} key={tab.name} />;
         })}
       </section>
     </article>

src/refactor/ui/components/gallery/Tab.tsx

@@ -6,12 +6,7 @@ interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 export const Tab = ({ title, active, ...props }: TabProps) => (
-  <button
-    type="button"
-    className={`tab ${active ? 'active' : ''}`}
-    {...props}
-    key={`tab-${title}`}
-  >
+  <button type="button" className={`tab ${active ? 'active' : ''}`} {...props}>
     {title}
   </button>
 );