How to create Tabs in ReactJS

In this tutorial, we will learn how to create Tabs in ReactJS in different ways.

Create a new react app using the create-react-app

npx create-react-app tab

Move inside to the created tab folder using the cd command.

cd tab

Creating Tabs in ReactJS using react-tabs

Requirements

• react-tabs  –  use npm i react-tabs command to install react-tabs

We have used the default CSS style in react-tabs. The TAB 1,2 and 4 are active tabs and DISABLED TAB is disabled. Modify App.js in the src folder to the code below.

import "./App.css";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";

function App() {
  return (
    <div className="App">
      <h1>Create Tabs in ReactJS using react-tabs</h1>
      <Tabs defaultIndex={0} >
        <TabList>
          <Tab>TAB 1</Tab>
          <Tab>TAB 2</Tab>
          <Tab disabled={true}>DISABLED TAB</Tab>
          <Tab>TAB 4</Tab>
        </TabList>
        <TabPanel>
          <h2>TAB NO: 1</h2>
        </TabPanel>
        <TabPanel>
          <h2>TAB NO:2</h2>
        </TabPanel>
        <TabPanel>
          <h2>TAB NO:3</h2>
        </TabPanel>
        <TabPanel>
          <h2>TAB NO:4</h2>
        </TabPanel>
      </Tabs>
    </div>
  );
}

export default App;

Run the code using the command below

npm start

OUTPUT

Image:

Creating Tabs in ReactJS using material-ui

Requirements

• material-ui  –  use npm i @material-ui/core command to install material-ui

We have used React.useState() to maintain the tab number information across the App component. Modify App.js in the src folder to the code below.

import React from "react";
import Tab from "@material-ui/core/Tab";
import Tabs from "@material-ui/core/Tabs";

const App = () => {
  const [value, setValue] = React.useState(0);

  return (
    <div
      style={{
        marginLeft: "15%",
        marginRight: "15%",
      }}
    >
      <h2>Create Tabs in ReactJS using material-ui</h2>
      <Tabs
        value={value}
        textColor="primary"
        indicatorColor="primary"
        onChange={(e, val) => {
          setValue(val);
        }}
      >
        <Tab label="TAB One" />
        <Tab label="TAB Two" />
        <Tab label="Disabled TAB" disabled />
        <Tab label="TAB Four" />
      </Tabs>
      <h3>TAB NO: {value + 1} </h3>
    </div>
  );
};

export default App;

Run the code using the command below

npm start

OUTPUT

Creating Tabs in ReactJS without using other modules

We have used React.getState() and buttons,ul in HTML to create Tabs. Modify App.js in the src folder to the code below.

import './App.css';
import React from 'react';

function App() {

  const [value,setValue] = React.useState(0)

  const actArray = []
  for(let i=0;i<4;i++){
    if (i===value){
      actArray.push('btn active')
    }
    else{
      actArray.push('btn')
    }
  }

  return (
    <div className="App">
      <h1>Create Tabs in ReactJS without using other modules</h1>
      <ul style={{listStyle:'none', marginLeft:'30%'}}>
        <li style={{float:'left'}}><button type='button' className={actArray[0]} onClick={()=>{setValue(0)}}>TAB One</button></li>
        <li style={{float:'left'}}><button type='button' className={actArray[1]} onClick={()=>{setValue(1)}}>TAB Two</button></li>
        <li style={{float:'left'}}><button type='button' className={actArray[2]} disabled onClick={()=>{setValue(2)}}>Disabled TAB</button></li>
        <li style={{float:'left'}}><button type='button' className={actArray[3]} onClick={()=>{setValue(3)}}>TAB Four</button></li>
      </ul>
      <br/><br/>
      <div>
        <h2>TAB NO: {value+1}</h2>
      </div>
    </div>
  );
}

export default App;

We used our own CSS styling, append the below code to the App.css file in the src folder.

.btn {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  margin: 5px
}

.active, .btn:hover {
  background-color: #666;
  color: white;
}

Run the code using the command below

npm start

OUTPUT