change Tabs to use react hooks

src/components/Tab.jsx

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

src/components/Tabs.jsx

@@ -1,62 +1,39 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import Tab from './Tab';
 
-class Tabs extends Component {
-  constructor(props) {
-    super(props);
+const Tabs = ({ children }) => {
+  const [activeTab, setActiveTab] = useState(children[0].props.label);
 
-    const { children } = this.props;
-    this.state = {
-      activeTab: children[0].props.label,
-    };
-  }
+  return (
+    <div className="tabs">
+      <ol className="tab-list">
+        {children.map((child) => {
+          if (!child.props) {
+            return undefined;
+          }
+          const { label } = child.props;
 
-  onClickTabItem = (tab) => {
-    this.setState({ activeTab: tab });
-  }
-
-  render() {
-    const {
-      onClickTabItem,
-      props: {
-        children,
-      },
-      state: {
-        activeTab,
-      },
-    } = this;
-
-    return (
-      <div className="tabs">
-        <ol className="tab-list">
-          {children.map((child) => {
-            if (!child.props) {
-              return undefined;
-            }
-            const { label } = child.props;
-
-            return (
-              <Tab
-                activeTab={activeTab}
-                key={label}
-                label={label}
-                onClick={onClickTabItem}
-              />
-            );
-          })}
-        </ol>
-        <div className="tab-content">
-          {children.map((child) => {
-            if (!child.props || child.props.label !== activeTab) {
-              return undefined;
-            }
-            return child.props.children;
-          })}
-        </div>
+          return (
+            <Tab
+              activeTab={activeTab}
+              key={label}
+              label={label}
+              onClick={(tab) => setActiveTab(tab)}
+            />
+          );
+        })}
+      </ol>
+      <div className="tab-content">
+        {children.map((child) => {
+          if (!child.props || child.props.label !== activeTab) {
+            return undefined;
+          }
+          return child.props.children;
+        })}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
 export default Tabs;