How to create Tabs in ReactJS ?

ReactJS is a popular JavaScript library for building user interfaces. It provides a component−based approach to web development, making it easier to create interactive and dynamic UI elements. Tabs are a common UI pattern used to organize and present content in a user−friendly manner. In this article, we will explore how to create a tab component in ReactJS.

Prerequisites

Before reading this article, you should have a basic understanding of ReactJS and its core concepts. Make sure you have Node.js and npm (Node Package Manager) installed on your machine.

Setting up a new React project

First, let's set up a new React project using Create React App, a tool that helps in creating a new React project with a basic project structure. Open your terminal and run the following command:

npx create-react-app tab-example

Method 1:Using UseRef Hook

The useRef hook is a built−in React hook that allows us to create a mutable reference to an element in the component. We can use it to manage the active tab state in our tab component.

Example

In the below code, we start by importing the necessary dependencies and setting up our functional component, Tabs. Inside the component, we create a useRef hook called tabsRef to store an array of tab objects. This allows us to reference the tabs and their properties. We also create a state variable called activeTab using the useState hook to keep track of the currently active tab. The handleTabClick function is responsible for updating the activeTab state when a tab is clicked. The renderTabs function iterates over the tabsRef.current array and renders the tab titles. It adds the 'active' class to the currently active tab. Finally, we return the JSX markup for the tabs and the active tab's content.

import React, { useRef, useState } from 'react';
import './Tabs.css'; // Import the CSS file
const Tabs = () => {
  const tabsRef = useRef([{ title: 'Tab 1', content: 'Content 1' },
  { title: 'Tab 2', content: 'Content 2' },
  { title: 'Tab 3', content: 'Content 3' }]);
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  const renderTabs = () => {
    return tabsRef.current.map((tab, index) => (
      <div
        key={index}
        onClick={() => handleTabClick(index)}
        className={activeTab === index ? 'active' : ''}
      >
        {tab.title}
      </div>
    ));
  };

  return (
    <div className="tabs-container">
      {renderTabs()}
      <div className="tab-content">
        {tabsRef.current[activeTab].content}
      </div>
    </div>
  );
};

export default Tabs;
  return (
    <div className="tabs-container">
      {renderTabs()}
      <div className="tab-content">
        {tabsRef.current[activeTab].content}
      </div>
    </div>
  );
};

export default Tabs;

Output

Method 2:Using the useReducer Hook

The useReducer hook is another built−in React hook that provides a way to manage complex state logic in a more organized manner. We can utilize this hook to handle the state changes of our tabs.

Example

In the below code, we initialize the state object with an empty 'tabs' array and the 'activeTab' property set to 0. By initializing the state object properly, we ensure that the 'state.tabs' array is not undefined, allowing us to map over it and access the tab objects and their properties.

The '?.content' syntax used in the 'tab−content' div ensures that the content property is only accessed if the current tab object is defined. This prevents the error when switching tabs.

You can customize the rendering of the tab titles and content based on your specific design requirements.

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_ACTIVE_TAB':
      return { ...state, activeTab: action.payload };
    default:
      return state;
  }
};

const Tabs = () => {
  const [state, dispatch] = useReducer(reducer, { tabs: [{ title: 'Tab 1', content: 'Content 1' },
  { title: 'Tab 2', content: 'Content 2' },
  { title: 'Tab 3', content: 'Content 3' }
], activeTab: 0 });

  const handleTabClick = (index) => {
    dispatch({ type: 'SET_ACTIVE_TAB', payload: index });
  };

  const renderTabs = () => {
    return state.tabs.map((tab, index) => (
      <div
        key={index}
        onClick={() => handleTabClick(index)}
        className={state.activeTab === index ? 'active' : ''}
      >
        {tab.title}
      </div>
    ));
  };

  return (
    <div className="tabs-container">
      {renderTabs()}
      <div className="tab-content">{state.tabs[state.activeTab]?.content}</div>
    </div>
  );
};

export default Tabs;

Output

Method 3:Using the State and Props

The third method involves using the state and props of the component to manage the active tab. This method is more suitable for simpler cases where the tab logic is not overly complex.

Example

In the below code, we define the 'tabs' array within the Tabs component, providing the necessary data for the tab titles and content. By defining the 'tabs' array within the component, we ensure that it is accessible within the component's scope. The useState hook is used to manage the active tab state with the initial value set to 0. The handleTabClick function updates the active tab when a tab is clicked. The renderTabs function maps over the 'tabs' array and renders the tab titles. The 'active' class is applied to the active tab based on the activeTab state.

The tab−content div displays the content of the currently active tab.

import React, { useState } from 'react';

const Tabs = () => {
  const [activeTab, setActiveTab] = useState(0);

  // Define the tabs array within the component
  const tabs = [
    { title: 'Tab 1', content: 'Content 1' },
    { title: 'Tab 2', content: 'Content 2' },
    { title: 'Tab 3', content: 'Content 3' }
  ];

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  const renderTabs = () => {
    return tabs.map((tab, index) => (
      <div
        key={index}
        onClick={() => handleTabClick(index)}
        className={activeTab === index ? 'active' : ''}
      >
        {tab.title}
      </div>
    ));
  };

  return (
    <div className="tabs-container">
      {renderTabs()}
      <div className="tab-content">{tabs[activeTab]?.content}</div>
    </div>
  );
};

export default Tabs;

Output

Conclusion

In this article, we discussed how we can create Tabs in Reactjs. We covered that the useRef hook is useful for managing mutable references, the useReducer hook provides a more structured approach for state management, and the state and props method is suitable for simpler tab implementations. By understanding these techniques, you can create interactive and user−friendly tab components in your React applications.