change Tabs to use react hooks

src/components/Tab.jsx

@@ -1,22 +1,7 @@
-import React, { Component } from 'react';
-
-class Tab extends Component {
-  onClick = () => {
-    const { label, onClick } = this.props;
-    onClick(label);
-  }
-
-  render() {
-    const {
-      onClick,
-      props: {
-        activeTab,
-        label,
-      },
-    } = this;
+import React from 'react';
 
+const Tab = ({ onClick, activeTab, label }) => {
   let className = 'tab-list-item';
-
   if (activeTab === label) {
     className += ' tab-list-active';
   }
@@ -25,12 +10,11 @@ class Tab extends Component {
     <li
       role="presentation"
       className={className}
-        onClick={onClick}
+      onClick={() => onClick(label)}
     >
       {label}
     </li>
   );
-  }
-}
+};
 
 export default Tab;

src/components/Tabs.jsx

@@ -1,31 +1,9 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import Tab from './Tab';
 
-class Tabs extends Component {
-  constructor(props) {
-    super(props);
-
-    const { children } = this.props;
-    this.state = {
-      activeTab: children[0].props.label,
-    };
-  }
-
-  onClickTabItem = (tab) => {
-    this.setState({ activeTab: tab });
-  }
-
-  render() {
-    const {
-      onClickTabItem,
-      props: {
-        children,
-      },
-      state: {
-        activeTab,
-      },
-    } = this;
+const Tabs = ({ children }) => {
+  const [activeTab, setActiveTab] = useState(children[0].props.label);
 
   return (
     <div className="tabs">
@@ -41,7 +19,7 @@ class Tabs extends Component {
               activeTab={activeTab}
               key={label}
               label={label}
-                onClick={onClickTabItem}
+              onClick={(tab) => setActiveTab(tab)}
             />
           );
         })}
@@ -56,7 +34,6 @@ class Tabs extends Component {
       </div>
     </div>
   );
-  }
-}
+};
 
 export default Tabs;