Go Back

How to Make Tabs with React JS

Created by Ahmad Negm

2023-04-29

Tabs are a great way to organize content in a React application. They allow users to switch between different sections of content without having to reload the entire page.There are a few different ways to make tabs with React JS. One way is to use the

1Tab

component from the React Bootstrap library. This component provides a simple and easy way to create tabs with a variety of customization options.Another way to make tabs with React JS is to use the

1Tabs

component from the Material UI library. This component provides a more advanced tab component with features such as disabled tabs, scrollable tabs, and icon tabs.No matter which method you choose, making tabs with React JS is a relatively simple process. Here are the basic steps involved:

Create a list of the tabs that you want to display.
Create a container element for the tabs.
Loop through the list of tabs and render a
```
1Tab
```
component for each one.
Set the active tab by using the
```
1ActiveTab 
```
prop on the
```
1Tabs
```
component.

Here is an example of how to make tabs with the React Bootstrap library:JavaScriptimport React from "react";

1import { Tab, Tabs } from "react-bootstrap";
2
3const App = () => {
4  const tabs = [
5    {
6      title: "Tab 1",
7      content: "This is the content for Tab 1.",
8    },
9    {
10      title: "Tab 2",
11      content: "This is the content for Tab 2.",
12    },
13    {
14      title: "Tab 3",
15      content: "This is the content for Tab 3.",
16    },
17  ];
18
19  return (
20    <div>
21      <Tabs activeTab="Tab 1">
22        {tabs.map((tab) => (
23          <Tab key={tab.title} title={tab.title}>
24            {tab.content}
25          </Tab>
26        ))}
27      </Tabs>
28    </div>
29  );
30};
31
32export default App;

Here is an example of how to make tabs with the Material UI library:JavaScriptimport React from "react"; import { Tabs, Tab } from "material-ui";

1const App = () => {
2  const tabs = [
3    {
4      label: "Tab 1",
5      content: "This is the content for Tab 1.",
6    },
7    {
8      label: "Tab 2",
9      content: "This is the content for Tab 2.",
10    },
11    {
12      label: "Tab 3",
13      content: "This is the content for Tab 3.",
14    },
15  ];
16
17  return (
18    <div>
19      <Tabs value="Tab 1">
20        {tabs.map((tab) => (
21          <Tab key={tab.label} label={tab.label}>
22            {tab.content}
23          </Tab>
24        ))}
25      </Tabs>
26    </div>
27  );
28};
29
30export default App;

copyThese are just a few examples of how to make tabs with React JS. There are many other ways to do it, so feel free to experiment and find the method that works best for you.