Creating a tab component in React
Tags: javascript, tutorial, react
Published: 2023-03-10 00:01:49

In this tutorial we’ll be building a tab component in React. Tab components allow you to break complex interfaces into smaller subsections that are easy to navigate between. Tabs are a commonly used UI element so having an understanding of how they work in React is quite beneficial.

For the purposes of this tutorial we’ll setup a project using [Create React App](https://w3collective.com/create-react-app/) by running the following command:

`npx create-react-app react-tabs`

Once the setup is complete create a new `/src/components` folder with a `Tab.js` file and `tab.css` file.

We’ll now create the basic structure for the tab component in the `Tab.js` file:

```javascript
import React, { useState } from "react";
import "./tabs.css";

const Tabs = () => { 
  return (
    <>
     <h1>Hello World</h1>
    </>
  );
};

export default Tabs;
```

Now let’s load the component by editing the `App.js` file as follows:

```javascript
import "./App.css";
import Tabs from "./components/Tabs";

const App = () => {
  return (
    <div className="App">
      <Tabs />
    </div>
  );
}

export default App;
```

Test to see that the component had been loaded successfully then move onto the next step.

Back to the `Tab.js` file let’s first declare the required variables:

```javascript
import React, { useState } from "react";
import "./tabs.css";

const Tabs = () => {
  const [activeIndex, setActiveIndex] = useState(1);
  const handleClick = (index) => setActiveIndex(index);
  const checkActive = (index, className) => activeIndex === index ? className : "";
  return (
    <>
      <h1>Hello World</h1>
    </>
  );
};

export default Tabs;

```

- `activeIndex` – contains the index of active tab, in our case 1,2, or 3.
- `handleClick` – sets the active index when a tab is clicked.
- `checkActive` – adds the active class for styling and toggling visibility.

We can now add the HTML markup starting with the clickable tab elements:

```javascript
const Tabs = () => {
  const [activeIndex, setActiveIndex] = useState(1);
  const handleClick = (index) => setActiveIndex(index);
  const checkActive = (index, className) => activeIndex === index ? className : "";
  return (
    <>
      <div className="tabs">
        <button
          className={`tab ${checkActive(1, "active")}`}
          onClick={() => handleClick(1)}
        >
          Product Info
        </button>
        <button
          className={`tab ${checkActive(2, "active")}`}
          onClick={() => handleClick(2)}
        >
          Customer Reviews
        </button>
        <button
          className={`tab ${checkActive(3, "active")}`}
          onClick={() => handleClick(3)}
        >
          Delivery &amp; Returns
        </button>
      </div>      
    </>
  );
};
```

And the panels that contain the content:

```javascript
const Tabs = () => {
  const [activeIndex, setActiveIndex] = useState(1);
  const handleClick = (index) => setActiveIndex(index);
  const checkActive = (index, className) => activeIndex === index ? className : "";
  return (
    <>
      <div className="tabs">
        <button
          className={`tab ${checkActive(1, "active")}`}
          onClick={() => handleClick(1)}
        >
          Product Info
        </button>
        <button
          className={`tab ${checkActive(2, "active")}`}
          onClick={() => handleClick(2)}
        >
          Customer Reviews
        </button>
        <button
          className={`tab ${checkActive(3, "active")}`}
          onClick={() => handleClick(3)}
        >
          Delivery &amp; Returns
        </button>
      </div>
      <div className="panels">
        <div className={`panel ${checkActive(1, "active")}`}>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean erat ligula, feugiat at felis vitae, porttitor lacinia quam.</p>
        </div>
        <div className={`panel ${checkActive(2, "active")}`}>
          <p>Nulla lobortis quis massa quis lobortis. Nullam porta semper lorem, vel efficitur augue rutrum quis. Suspendisse potenti.</p>
        </div>
        <div className={`panel ${checkActive(3, "active")}`}>
          <p>Cras porta consectetur dolor porttitor fringilla. Cras vitae urna ac erat fermentum egestas. Donec egestas cursus scelerisque.</p>
        </div>
      </div>
    </>
  );
};
```
Now we just need to add the CSS as follows:

```css
.tabs {  
  display: flex;  
}
.tab {  
  justify-content: center;
  align-items: center;
  width: 100%;
  background: lightsteelblue; 
  padding: 2em 0;  
  border: none;
}
.tab:not(:last-child) {
  border-right: 1px solid steelblue;  
}
.tab.active {
  background: steelblue;
  font-weight: bold;
}
.panel {
  display: none;
  background-color: #eaeaea;
  padding: 10px;
}
.panel.active {
  display: block;
}
```

That’s all for this tutorial. You should now have a working tab component that’s can easily be dropped into a React application. If you’re interested in learning more about building custom React components check out all our full collection of [React tutorials](https://w3collective.com/tag/react/).