TabSwitcher-final.tsx

import React, { createContext, useState, useContext } from "react";

const context = createContext({
  activeTabId: "a",
  changeTab: (id: string) => {}
});

const Tab = ({ id, children }: any) => {
  const tab = useContext(context);
  return <div onClick={() => tab.changeTab(id)}>{children}</div>;
};

const TabPanel = ({ whenActive, children }: any) => {
  const tab = useContext(context);
  return tab.activeTabId === whenActive ? children : null;
};

const TabSwitcher = ({ children }: any) => {
  const [activeTabId, setActiveTab] = useState<string>("a");
  const changeTab = (newTabId: any) => {
    setActiveTab(newTabId);
  };

  return (
    <context.Provider
      value={{
        activeTabId: activeTabId,
        changeTab: changeTab
      }}
    >
      {children}
    </context.Provider>
  );
};
export default TabSwitcher;
export { Tab, TabPanel };