Learn to Create a Simple Reusable Tab Component with React JS

This tutorial will teach you how to create a reusable tab component using React JS which is a very popular Javascript library. The Tab component will be customizable by passing an array of items.
The tab items will be dynamically added to any page or component.

Table of Contents

Project Structure

(root)--
       |-node_modules
       |-public
       |-src
           |-components
                    |-xtabs.js
                    |-xtabs.module.css
           |-App.js
           |-index.js
       |-package.json

src/index.js
First, we start with index.js and import the App component from src/App.js. This component will have xtab component and will be used to display in the browser.

import App from './App';

ReactDOM.render(<App />, document.getElementById('react-root') );

After this, we’ll create an App component in src/App.js.

import Xtab from './components/xtabs';

function App() {
    const items = [
    {
        name: "Description",
        content: (
        <>
            <h4>The Product Description</h4>
            <p>Lorem </p>
        </>
        ),
        is_active: true,
    },
    {
        name: "Additional Information",
        content: ( <p>Additional Information Tab</p> ),
        is_active: false,
    },
    ];

    return (
        <Xtab items={items} />
    );
}

export default App;

The App component has items array which is passed as props to Xtab component.
The items array can be dynamic as it will be store in a state within Xtab component.

Each item of array items must consist of a property is_active which takes a boolean value. If the value of is_active is set to true then that item will be displayed and the rest it will be hidden.
They will be shown when user clicks on their individual tabs.

Xtabs Component

Now create Xtab in src/components/xtabs.js and also create an xtabs.module.css within the same directory.
Start by importing import React, { useState } from ‘react’ as we use useState to manage the states of items sent by the App component.
The function useState() is a react hook that can be used within a functional component only.

const [items, setItems] = useState( props.items )

If we want to update the values of items state then use setItems() function provided by useState.

Switching between tabs

On every tab, there will be an onClick event which takes 2 parameters event and items array index number. The property is_active will be assigned false except the item with the index will be set to true.
And at the end, the state is updated by calling setItems() function.

function show(event, index){
    let tabs = items;

    tabs.map( ( item, item_index ) => {

        item.is_active=false
        if( item_index == index ){
            item.is_active=true
        }

        return tabs
    } )

    setItems( [ ...tabs ] )
}

Complete code of Xtab Component

import React, { useState } from 'react'
import  styles from './xtabs.module.css'

export default function Xtab( props ) {

    const [items, setItems] = useState( props.items )

    function show(event, index){
        let tabs = items;

        tabs.map( ( item, item_index ) => {

            item.is_active=false
            if( item_index == index ){
                item.is_active=true
            }

            return tabs
        } )

        setItems( [ ...tabs ] )
    }


    return (
        <React.Fragment>
            <div className={ styles['x-tab'] } >
                <ul className={ styles['x-tab-list'] }>
                    {
                        items.map( ( item, index ) => {
                            return  (
                                <li key={index} onClick={ ( event ) => show( event, index ) }
                                    className={ ` ${ styles['x-tab-item'] } ${ ( item['is_active'] )? styles['active'] : '' } ` } >
                                    <span>{ item['name'] }</span>
                                </li>
                            )
                        } )
                    }

                </ul>

                <div className={ styles['x-tab-container'] } >

                    {
                        items.map( ( item, index ) => {
                            return  (
                                <div key={index} className={ ` ${ styles['x-tab-content'] }  ${ ( item['is_active'] )? styles['active'] : '' } ` }>
                                    { item['content'] }
                                </div>
                            )
                        } )
                    }
                </div>
            </div>
        </React.Fragment>
    )
}

xtabs CSS module

We’ll be using CSS modules to apply CSS to the HTML element.

.x-tab{
    background-color: #fcfcfc;
}

.x-tab .x-tab-list{
    margin: 0;
    padding: 0;
    display: flex;
}

.x-tab .x-tab-item{
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

.x-tab .x-tab-item.active{
    background-color: #ebebeb;
}

.x-tab .x-tab-container{
    display:block;
}

.x-tab .x-tab-content{
    display: none;
}

.x-tab .x-tab-content.active{
    display: block;
    padding: 10px 15px;
}

Final Output

Final Output of Simple Reuseable Tab with React JS
Final Output of Simple Reusable Tab with React JS

Conclusion

Now you have got a full understanding of creating a reusable Tab component with react js. We regularly post on Javascript and its library and frameworks. Follow our other posts to learn about other tutorials.

Summary
Review Date
Reviewed Item
Learn to Create a Simple Reuseable Tab with React JS
Author Rating
51star1star1star1star1star
Software Name
React JS
Software Name
Windows Os, Mac Os, Ubuntu Os
Software Category
Web Development