How to usecustom Tab component with active parameter in ReactJS

Steps to create React Application And Installing Module:

Approach 2: Using Material UI Tab component

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">w3wiki</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.

How to create Tabs in ReactJS ?

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.