AppDividend
Latest Code Tutorials

How To Create Bootstrap Tab Component In React

664

Get real time updates directly on you device, subscribe now.

In this tutorial, I will show you How To Create Bootstrap Tab Component In React. In regular bootstrap, building a tab component is a straightforward task. But creating inside React.js is a bit complex. We need to rely on the state to display active tabs. So in this example, we will create a Tab component using React.js. Tab components allow you to break up complex user interfaces into more manageable subsections that a user can quickly switch between. The navigation bar is not always the best solution. So, We will use Bootstrap 4 classes to display the Tab component.

# Create Bootstrap Tab Component In React

We start our tutorial by installing the React.js using create-react-app. Then we install Bootstrap 4 and use that Bootstrap – Navs css classes.

#Step 1: Install React.js.

Type the following command. You do not need to install create-react-app if you have not installed previously on your machine.

npm install -g create-react-app
create-react-app react-tab

#Step 2: Install Bootstrap 4.

Type the following command.

npm install bootstrap --save

# or

yarn add bootstrap

Import the bootstrap.min.css file inside App.js file.

// App.js

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

#Step 3: Create three components.

Inside src folder, create one folder called components.

Create three files inside components folder.

  1. TabContent.js
  2. TabList.js
  3. Tab.js

Okay, now write the following code inside TabContent.js file.

// TabContent.js

import React, { Component } from 'react';

import '../App.css';

export default class TabContent extends Component {
    render() {
        return (
            <div className="container up">
               <div className="tab-content">
                    Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
               </div>
                <div className="tab-content">
                     Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
                </div>
                <div className="tab-content">
                     Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
                </div>
            </div>
        );
    }
}

Okay, so this component is responsible for displaying the information after the user has clicked on the appropriate tabs. Also, write the css code inside App.css file.

// App.css

.up {
  margin-top: 50px
}

Now, import this file inside src >> App.js file.

// App.js

import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import TabContent from './components/TabContent';

class App extends Component {
  render() {
    return (
      <TabContent />
    );
  }
}

export default App;

Save the file and start the React development server using the following command.

yarn start

#Step 4: Build TabList.js component.

Now, this component is responsible for displaying the tab items. So, when we click any of the tab items, we will show the information related to that item. So, this TabList.js component expects an array of items. Now, we have already defined the items inside TabContent.js file. So we need to set this TabList.js component as a parent component. So first let us do that.

// TabContent.js

import React, { Component } from 'react';
import TabList from './TabList';

import '../App.css';

export default class TabContent extends Component {
    render() {
        return (
            <div className="container up">
                <TabList>
                    <div label="Sun" className="tab-content">
                        Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
                    </div>
                    <div label="Mon" className="tab-content">
                        Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
                    </div>
                    <div label="Tue" className="tab-content">
                        Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.
                    </div>
                </TabList>
            </div>
        );
    }
}

So, we have set the parent component to TabList, and all of the children are its content. Also, we have defined the label to every child components.

Now, add the following code inside TabList.js file.

// TabList.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Tab from './Tab';

export default class TabList extends Component {
  static propTypes = {
    children: PropTypes.instanceOf(Array).isRequired,
  }

  constructor(props) {
    super(props);

    this.state = {
      activeTab: this.props.children[0].props.label,
    };
  }

  onClickTabItem = (tab) => {
    this.setState({ activeTab: tab });
  }

  render() {
    const { onClickTabItem, props: {children},state: {activeTab} } = this;

    return (
        <div>
            <nav>
            <div className="nav nav-pills">
                {children.map((child) => {
                const { label } = child.props;
    
                return (
                    <Tab
                    activeTab={activeTab}
                    key={label}
                    label={label}
                    onClick={onClickTabItem}
                    />
                );
                })}
            </div>
            </nav>
            <div className="tab-content">
            {children.map((child) => {
                if (child.props.label !== activeTab) return undefined;
                return child.props.children;
            })}
            </div>
      </div>
    );
  }
}

Here, all of the content will be available as children because this component is parent component. So we can access through this.props.children. By default active tab will be the first nav item, so set the state to activeTab as a first item.

If the user clicks another tab, then activeTab will be changed accordingly.

Now, here, we have compared the label values. We need to compare to show the information based on the active tab. So if the label from the children and active Tab will be the same, then we display the data. Otherwise, we display undefined.

When the user clicks other tabs, then this component rerender and display the data accordingly based on activeTab.

Okay, finally, we need to write the following code inside Tab.js file.

// Tab.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Tab extends Component {
  static propTypes = {
    activeTab: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onClick: PropTypes.func.isRequired,
  };

  onClick = () => {
    const { label, onClick } = this.props;
    onClick(label);
  }

  render() {
    const { onClick, props: { activeTab, label }} = this;

    let className = 'nav-item nav-link';

    if (activeTab === label) {
      className += ' active';
    }

    return (
      <a
        className={className}
        onClick={onClick}
      >
        {label}
      </a>
    );
  }
}

The Tab.js component displays the name of the tab and adds the class if the tab is active. When clicked, the component will fire a handler that will let Tabs know which tab should be active. An according to active tab, we display the information that is it. We have done it the Bootstrap Tab Component in React.

Save the file, and you can see something like this.

Related Posts
1 of 18

How To Create Bootstrap Tab Component In React

 

We can also display the traditional way of tabs using this className inside TabList.js.

// TabList.js

<div className="nav nav-tabs">
     {children.map((child) => {
        const { label } = child.props;
    
         return (
               <Tab
                 activeTab={activeTab}
                 key={label}
                 label={label}
                 onClick={onClickTabItem}
                 />
           );
      })}
</div>

 

How To Create Tabs in React

Finally, our Create Bootstrap Tab Component In React Tutorial is over. Thanks for taking this example.

2 Comments
  1. Jacob says

    thank you for this!

    1. Jacob says

      but this does not update the active state when other tabs are clicked

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.