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