Create Tabs with React Hooks
Tags: react, tab, javascript, tutorial
Published: 2023-01-07 12:52:02

Hello Devs, for this tutorial we’re going to make a tabs with React Hooks.

## 1. Create Tabs.js
Inside our `Tabs.js` we have two main elements. The first one is a div called `tabs`. Inside our `tabs`, we have buttons called `tab-button` and `tab-button active` if it’s in active state. The second main element is `tabs-content`. Inside the `tabs-content`, we have `tab-page` and `tab-page active` if it’s in active state.

```javascript
import React from 'react';
import './tabs.css';

export default function Tabs() {
  return (
    <div>
      <div className="container">
        <div className="tabs">
          <button className="tab-button active" id="tab-1">
            Tab 1
          </button>
          <button className="tab-button" id="tab-2">
            Tab 2
          </button>
          <button className="tab-button" id="tab-3">
            Tab 3
          </button>
        </div>
        <div className="tabs-content">
          <div className="tab-page active">
            <p>This is page 1</p>
          </div>
          <div className="tab-page">
            <p>This is page 2</p>
          </div>
          <div className="tab-page">
            <p>This is page 3</p>
          </div>
        </div>
      </div>
    </div>
  );
}
```

## 2. Create tabs.css
This is our basic CSS.

```css
.container {
  padding: 0 24px;
}
.tabs {
  display: flex;
  border-bottom: 1px solid #c6c6c6;
}
.tab-button {
  padding: 8px 16px;
  border-radius: 0;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tab-button:hover {
  border-bottom: 2px solid #1d3557;
}
.tab-button.active {
  border-bottom: 2px solid #1d3557;
  color: #1d3557;
  font-weight: 700;
}
.tab-page {
  padding: 24px 16px 16px 16px;
  display: none;
}
.tab-page.active {
  display: block;
}
```

And BOOM, this is your tabs supposed to look like.
![Tabs with just CSS with no functionality](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4xj06kid1buf7sflt7d.gif)

Very cool, now let's move on to the next step.

## 3. Add functionality
First, let’s create a state called `active` and add a value to our state to `tab-1`.

```javascript
const [active, setActive] = useState('tab-1');
```

Then, create a function called `handleClick`.

```javascript
const handleClick = (event) => {
  setActive(event.target.id);
};
```

Now, let’s put our `handleClick` function and `active` state to our component like this

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

export default function Tabs() {
  const [active, setActive] = useState('tab-1');

  const handleClick = (event) => {
    setActive(event.target.id);
  };

  return (
    <div>
      <div className="container">
        <div className="tabs">
          <button
            className={`tab-button ${active === 'tab-1' ? 'active' : ''}`}
            id="tab-1"
            onClick={handleClick}
          >
            Tab 1
          </button>
          <button
            className={`tab-button ${active === 'tab-2' ? 'active' : ''}`}
            id="tab-2"
            onClick={handleClick}
          >
            Tab 2
          </button>
          <button
            className={`tab-button ${active === 'tab-3' ? 'active' : ''}`}
            id="tab-3"
            onClick={handleClick}
          >
            Tab 3
          </button>
        </div>
        <div className="tabs-content">
          <div className={`tab-page ${active === 'tab-1' ? 'active' : ''}`}>
            <p>This is page 1</p>
          </div>
          <div className={`tab-page ${active === 'tab-2' ? 'active' : ''}`}>
            <p>This is page 2</p>
          </div>
          <div className={`tab-page ${active === 'tab-3' ? 'active' : ''}`}>
            <p>This is page 3</p>
          </div>
        </div>
      </div>
    </div>
  );
}
```

So the logic is when the `tab-button` is clicked, the value of the state `active` will change to the id of the clicked `tab-button`. And the logic for our inline conditional inside the `tab-button` and the `tab-page` is when the value of the state `active` is equal to their id, it will trigger the class `active` to the `tab-button` and the selected `tab-page`.

Here's what it's supposed to look like

![Full functioning tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5os5wjo4i9peyoe4sv4z.gif)

## Add disabled tabs
For disabled `tabs` add an attribute `disabled` to our button and add more lines to your CSS.

```javascript
<button
  className={`tab-button ${active === 'tab-4' ? 'active' : ''}`}
  id="tab-3"
  onClick={handleClick}
  disabled //add disabled atribute
>
  Disabled Tab
</button>
```

```css
/* add these lines to your css */
.tab-button:disabled:hover {
  border-bottom: 2px solid transparent;
}
```


![Tabs with disabled button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rxworzdklmydxlianin.gif)

## Variations
For more variations you can checkout my repo [here](https://github.com/NabillaTrisnani/react-hooks-tabs). 

### Variation 1
![Variation 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi5qjx19tdlw3itwl06k.gif)

### Variation 2
![Variation 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zi141d6sdi8b6cazheec.gif)

And there you have it, your custom React Hooks Tabs. You can check the repo [here](https://github.com/NabillaTrisnani/react-hooks-tabs). And as always let me know in the comments if it helps or if I miss something.
 
---

## Author
- Github: [@NabillaTrisnani](https://github.com/NabillaTrisnani)
- LinkendIn: [Nabilla Trisnani](https://www.linkedin.com/in/nabilla-trisnani/)
- Twitter: [@NabillaTrisnani](https://twitter.com/NabillaTrisnani)