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 that makes 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 way. 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 Node.js and npm (node ​​package manager) are installed on your computer.

Set up a new React project

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

npx create-react-app tab-example

Method 1: Use UseRef Hook

useRef hook is a built-in React hook that allows us to create mutable references to elements in components. We can use this to manage the active tab state in the tab component.

Example

In the code below, we first import the necessary dependencies and set up our functional component tab. Inside the component, we create a useRef hook called tabsRef to store an array of tab objects. This allows us to reference the tab and its properties. We also use the useState hook to create a state variable called activeTab to track 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 "Activity" class to the currently active tab. Finally, we return the JSX markup for the tab and active tab 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: Use useReducer Hook

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

Example

In the code below, we initialize the state object with an empty "tabs" array and set the "activeTab" property to 0. By properly initializing the state object, we ensure that the "state.tabs" array is not undefined, allowing us to map 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 when the current tab object is defined. This prevents errors when switching tabs.

You can customize the presentation of 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 State and Props

The third method involves using the component's state and properties to manage active tabs. This method is more suitable for simple cases where the tab logic is not too complex.

Example

In the code below, we define the "tabs" array in the tab component to provide the necessary data for the tab title and content. By defining the "tabs" array within the component, we ensure that it is accessible within the scope of the component. 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 the tab is clicked. The renderTabs function maps the "tabs" array and renders the tab titles. The "active" class is applied to the active tab based on the activeTab state.

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

in conclusion

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

The above is the detailed content of How to create tabs in ReactJS?. For more information, please follow other related articles on the PHP Chinese website!