#AD Top Online Web Development & Programming Courses | Udemy

Creating a tab component in React

Last modified January 7th 2022 | #react | GitHub Source Code [GitHub]

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;
Code language: JavaScript (javascript)

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;
Code language: JavaScript (javascript)

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;
Code language: JavaScript (javascript)
  • 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> </> ); };
Code language: JavaScript (javascript)

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> </> ); };
Code language: JavaScript (javascript)

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; }
Code language: CSS (css)

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 React tutorials here.

Related Posts

#AD Shop Web Developer T-Shirts