How to create Tabs in ReactJs using Hooks

Tabs is very useful functionality for switching between two or more views. But sometimes we need add something custom for match our requirements. In this example, I am gone show you how to create tabs from scratch using react hooks. Follow my steps for achieve your requirements :)

Step 1

Create a React Application using this command.

npx create-react-app yourprojectname

Step 2

After executing above command & creating your project folder i.e. yourprojectname, move to project folder using this command.

cd yourprojectname

Step 3

Start your React application using yarn or npm by following this command.

npm start or yarn start

Let’s write down interesting code in App.js file and create our custom tabs using hooks

import React,{useState} from 'react'

const Tab1 = () =>{
  return(
    <div style=>
      <p>tab1 shows</p>
    </div>
  )
}

const Tab2 = () =>{
  return(
    <div style=>
      <p>tab2 shows</p>
    </div>
  )
}

export default function App() {

  const [activeTab, setActiveTab] = useState("tab1");

  const handleTab1 = () => {
    setActiveTab("tab1");
  };
  const handleTab2 = () => {
    setActiveTab("tab2");
  };


  return (
    <div className="App">
      <div className="tabs">
      <div className="tab-link" style=>
        <p onClick={handleTab1}
        className={activeTab === "tab1" ? "active" : ""}
        style=
        >
        Tab1
        </p>
        <p
        onClick={handleTab2}
        className={activeTab === "tab2" ? "active" : ""}
        style=
        >
        Tab2
        </p>
      </div>
      <div className="outlet">
      {activeTab === "tab1" ? <Tab1 /> : <Tab2 />}
      </div>
    </div>
    </div>
  );
}