How to Create Tabs in React: Simple Tab Component Example

To create tabs in React, use a functional component with useState to track the active tab and conditionally render content based on the selected tab. Render clickable tab buttons that update the active tab state when clicked.

Syntax

A basic tabs component uses useState to store the active tab index or name. Render tab buttons that call a function to update this state. Conditionally render the content for the active tab below the buttons.

Key parts:

• const [activeTab, setActiveTab] = useState(initialTab): holds current tab
• Buttons with onClick={() => setActiveTab(tabName)} to switch tabs
• Conditional rendering: {activeTab === 'tab1' && <Tab1Content />}

jsx

import React, { useState } from 'react';

function Tabs() {
  const [activeTab, setActiveTab] = useState('tab1');

  return (
    <div>
      <button onClick={() => setActiveTab('tab1')}>Tab 1</button>
      <button onClick={() => setActiveTab('tab2')}>Tab 2</button>

      {activeTab === 'tab1' && <div>Content for Tab 1</div>}
      {activeTab === 'tab2' && <div>Content for Tab 2</div>}
    </div>
  );
}

Output

Two buttons labeled 'Tab 1' and 'Tab 2'. Clicking a button shows the content below: 'Content for Tab 1' or 'Content for Tab 2' depending on the selected tab.

Example

This example shows a simple tabs component with three tabs. Clicking a tab changes the displayed content below. It uses React's useState hook to track the active tab and updates it on button clicks.

jsx

import React, { useState } from 'react';

export default function SimpleTabs() {
  const [activeTab, setActiveTab] = useState('home');

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: 400, margin: 'auto' }}>
      <nav style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
        <button
          onClick={() => setActiveTab('home')}
          aria-selected={activeTab === 'home'}
          style={{
            padding: '0.5rem 1rem',
            borderBottom: activeTab === 'home' ? '2px solid blue' : '2px solid transparent',
            background: 'none',
            cursor: 'pointer'
          }}
        >
          Home
        </button>
        <button
          onClick={() => setActiveTab('profile')}
          aria-selected={activeTab === 'profile'}
          style={{
            padding: '0.5rem 1rem',
            borderBottom: activeTab === 'profile' ? '2px solid blue' : '2px solid transparent',
            background: 'none',
            cursor: 'pointer'
          }}
        >
          Profile
        </button>
        <button
          onClick={() => setActiveTab('settings')}
          aria-selected={activeTab === 'settings'}
          style={{
            padding: '0.5rem 1rem',
            borderBottom: activeTab === 'settings' ? '2px solid blue' : '2px solid transparent',
            background: 'none',
            cursor: 'pointer'
          }}
        >
          Settings
        </button>
      </nav>

      <section>
        {activeTab === 'home' && <p>Welcome to the Home tab content.</p>}
        {activeTab === 'profile' && <p>This is your Profile information.</p>}
        {activeTab === 'settings' && <p>Adjust your Settings here.</p>}
      </section>
    </div>
  );
}

Output

Three tab buttons labeled 'Home', 'Profile', and 'Settings' horizontally. The selected tab has a blue underline. Below, the content changes to show the text for the selected tab, e.g., 'Welcome to the Home tab content.'

Common Pitfalls

Common mistakes when creating tabs in React include:

• Not using state to track the active tab, causing UI not to update.
• Updating state incorrectly inside event handlers.
• Rendering all tab contents at once instead of conditionally, which can hurt performance.
• Missing accessibility attributes like aria-selected or keyboard navigation support.

Always use useState to track the active tab and conditionally render content.

jsx

import React, { useState } from 'react';

// Wrong: No state, tabs won't switch
function TabsWrong() {
  return (
    <div>
      <button>Tab 1</button>
      <button>Tab 2</button>
      <div>Content for Tab 1</div>
      <div>Content for Tab 2</div>
    </div>
  );
}

// Right: Use state and conditional rendering
function TabsRight() {
  const [active, setActive] = useState('tab1');
  return (
    <div>
      <button onClick={() => setActive('tab1')}>Tab 1</button>
      <button onClick={() => setActive('tab2')}>Tab 2</button>
      {active === 'tab1' && <div>Content for Tab 1</div>}
      {active === 'tab2' && <div>Content for Tab 2</div>}
    </div>
  );
}

Quick Reference

Tips for creating tabs in React:

• Use useState to track the active tab.
• Render tab buttons with onClick handlers to update state.
• Conditionally render only the active tab's content.
• Use semantic HTML and accessibility attributes like aria-selected.
• Style the active tab visually for clear user feedback.

Key Takeaways

Use React's useState hook to track which tab is active and update it on button clicks.

Render tab buttons that change the active tab state and conditionally show content for that tab.

Always conditionally render only the active tab's content to keep UI clean and performant.

Add accessibility attributes like aria-selected and keyboard support for better usability.

Style the active tab visually so users know which tab is selected.