Open In App

How to create Tabs in ReactJS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Tabs make it easy to explore and switch between different views. Material UI for React has this component available for us and it is very easy to integrate. We can use Tabs Component in ReactJS using the following approach.

Prerequisites:

we have these approaches to create Tabs in React JS

Steps to create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

Screenshot-from-2023-11-08-13-18-25

Approach 1: Using custom Tab component with active parameter

We will create custom tab components with the label as parameter and import to create multiple tab example. We will use CSS properties to show and hide the tab content.

Example: This example implements Tabs components usiing css styling.

Javascript




// Filename - App.js
 
import React from "react";
import Tabs from "./Tabs";
 
const App = () => {
    const tabData = [
        { label: "Tab 1" },
        { label: "Tab 2" },
        { label: "Tab 3" },
    ];
 
    return (
        <div className="App">
            <h1 className="geeks">GeeksforGeeks</h1>
            <h1>React Tabs Example</h1>
            <Tabs tabs={tabData} />
        </div>
    );
};
 
export default App;


Javascript




// Filename  - Tabs.js
 
import React, { useState } from "react";
import Tab from "./Tab";
import "./App.css";
 
const Tabs = ({ tabs }) => {
    const [activeTab, setActiveTab] = useState(1);
 
    const handleTabClick = (index) => {
        setActiveTab(index + 1);
    };
 
    return (
        <div className="tabs-container">
            <div className="tabs">
                {tabs.map((tab, index) => (
                    <Tab
                        key={index}
                        label={tab.label}
                        onClick={() =>
                            handleTabClick(index)
                        }
                        isActive={index === activeTab}
                    />
                ))}
            </div>
            <div className="tab-content">
                Tab {activeTab} is Active
            </div>
        </div>
    );
};
 
export default Tabs;


Javascript




// Filename - Tab.js
 
import React, { useState } from "react";
 
const Tab = ({ label, onClick, isActive }) => (
    <div
        className={`tab ${isActive ? "active" : ""}`}
        onClick={onClick}
    >
        {label}
    </div>
);
 
export default Tab;


CSS




/* Filename - App.css */
 
.App {
    text-align: center;
    margin: auto;
}
.geeks {
    color: green;
}
 
.tabs-container {
    width: 400px;
    margin: 20px auto;
}
 
.tabs {
    display: flex;
}
 
.tab {
    cursor: pointer;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ddd;
    border-bottom: none;
    background-color: #f1f1f1;
}
 
.tab.active {
    background-color: #ddd;
}
 
.tab-content {
    border: 1px solid #ddd;
    padding: 10px;
}


Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Peek-2023-11-08-13-11

Approach 2: Using Material UI Tab component

To create Tabs in React we can also use the Tab components provided by material UI. we will pass the parameters like label, content and disable to create the required tabs on the page.

Step to install MUI: After creating the ReactJS application, Install the material-ui modules using the following command:

npm install @material-ui/core

The updated dependencies after installing required packages

{
"dependencies": {
"@material-ui/core": "^4.12.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}

Example: This example implements multiple tabs using the MUI tab component.

Javascript




import React from "react";
import Paper from "@material-ui/core/Paper";
import Tab from "@material-ui/core/Tab";
import Tabs from "@material-ui/core/Tabs";
 
const App = () => {
    const [value, setValue] = React.useState(2);
 
    return (
        <div
            style={{
                marginLeft: "40%",
            }}
        >
            <h2>How to Create Tabs in ReactJS?</h2>
            <Paper square>
                <Tabs
                    value={value}
                    textColor="primary"
                    indicatorColor="primary"
                    onChange={(event, newValue) => {
                        setValue(newValue);
                    }}
                >
                    <Tab label="Active TAB One" />
                    <Tab label="Active TAB Two" />
                    <Tab label="Disabled TAB!" disabled />
                    <Tab label="Active Tab Three" />
                </Tabs>
                <h3>TAB NO: {value} clicked!</h3>
            </Paper>
        </div>
    );
};
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.



Last Updated : 09 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads