diff --git a/src/components/Tab.jsx b/src/components/Tab.jsx
index 7014e83..f160012 100644
--- a/src/components/Tab.jsx
+++ b/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 (
-
- {label}
-
- );
- }
-}
+ return (
+ onClick(label)}
+ >
+ {label}
+
+ );
+};
export default Tab;
diff --git a/src/components/Tabs.jsx b/src/components/Tabs.jsx
index 1388227..0853dfa 100644
--- a/src/components/Tabs.jsx
+++ b/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 (
+
+
+ {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 (
-
-
- {children.map((child) => {
- if (!child.props) {
- return undefined;
- }
- const { label } = child.props;
-
- return (
-
- );
- })}
-
-
- {children.map((child) => {
- if (!child.props || child.props.label !== activeTab) {
- return undefined;
- }
- return child.props.children;
- })}
-
+ return (
+
setActiveTab(tab)}
+ />
+ );
+ })}
+
+
+ {children.map((child) => {
+ if (!child.props || child.props.label !== activeTab) {
+ return undefined;
+ }
+ return child.props.children;
+ })}
- );
- }
-}
+
+ );
+};
export default Tabs;