functional tab

import React, { useState } from "react";
import PropTypes from "prop-types";
import Tab from "./Tab";

const Tabs = (props) => {
  const [ activeTab, setActiveTab ] = useState(props.children[0].props.label);
  return (
      <div className="tabs">
        <ol className="tab-list">
          {props.children.map((child) => (
              <Tab
                activeTab={activeTab}
                key={child.props.label}
                label={child.props.label}
                onClick={() => setActiveTab(child.props.label)}
              />
          )}
        </ol>
        <div className="tab-content">
          {props.children.map((child) => (
            child.props.label !== activeTab ? child.props.children : null
          ))}
        </div>
      </div>
    );
};

Tabs.propTypes = {
  children: PropTypes.instanceOf(Array).isRequired,
}

export default Tabs;