hook - useTab

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const content = [
  { tab: "Section1", content: "H1" },
  { tab: "Section2", content: "H2" }
];

const useTabs = (initTabs, allTabs) => {
  
  const [currentIndex, setCurrentIndex] = useState(initTabs);

    if(!allTabs || !Array.isArray(allTabs)){
      return ;
    }

  return {
    currentItem : allTabs[currentIndex],
    setCurrentIndex
  }
}

const App = () => {
  const tabs = useTabs(0, content);

  return (
    <div className="App">
      {content.map((item, index) => (
        <button onClick={()=>tabs.setCurrentIndex(index)}>{item.tab}</button>
      ))}
      <div>{tabs.currentItem.content}</div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);