DEV Community

Michael Burrows
Michael Burrows

Posted on • Originally published at w3collective.com

Creating a tab component in React

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 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:

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

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

export default Tabs;
Enter fullscreen mode Exit fullscreen mode

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

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

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

export default App;
Enter fullscreen mode Exit fullscreen mode

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:

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;

Enter fullscreen mode Exit fullscreen mode
  • 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:

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>      
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode

And the panels that contain the content:

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>
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode

Now we just need to add the CSS as follows:

.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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Oldest comments (0)