en en en en en fa en en de en pt en en en zh en lv pt ja ca en en en en en fa es en en en fr en en es fr en en it en en en en en de en pt en en en zh en lv pt ja ca en en en en en fa es en en en fr en en es fr en it es tr es es en en en en en fa en en de en pt en en en zh en lv pt ja ca en en en en en fa es en en en fr en en es fr en en en zh en en en it en sv nb es es es en en en en en en en en en en en fr ja en en en fr en fr en la en fr en en en en en en la en en en en en en en en en en en en en en en en es es es en en en en en en en en en en en en en en en en en en en en en en en en en en
How To Create Bootstrap Tab Component In React
If you want to learn more about React and Redux then check out this React 16.6 – The Complete Guide (incl. React Router & Redux) course.
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.
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.
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.
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 (     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.     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.     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.     ); } }
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 (   ); } } export default App;
Save the file and start the React development server using the following command.
#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 (       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.     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.     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.       ); } }
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 (       {children.map((child) => { const { label } = child.props; return (   ); })}       {children.map((child) => { if (child.props.label !== activeTab) return undefined; return child.props.children; })}     ); } }
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 (   {label}   ); } }
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.
We can also display the traditional way of tabs using this className inside TabList.js.
// TabList.js   {children.map((child) => { const { label } = child.props; return (   ); })}
Finally, our Create Bootstrap Tab Component In React Tutorial is over. Thanks for taking this example.
Previous articleNode.js Elastic Search: A Complete Step by Step Guide
Next articleAngular 12 NGXS Example: The Complete Guide
Krunal Lathiya is an Information Technology Engineer. By profession, he is a web developer with knowledge of multiple back-end platforms (e.g., PHP, Node.js, Python) and frontend JavaScript frameworks (e.g., Angular, React, and Vue).
Jacob October 15, 2018 At 5:29 pm
thank you for this!
Jacob October 17, 2018 At 7:03 pm
but this does not update the active state when other tabs are clicked
Leave A Reply Cancel reply
Please enter your comment!
Please enter your name here
You have entered an incorrect email address!
Please enter your email address here
Save my name, email, and website in this browser for the next time I comment.
This site uses Akismet to reduce spam. Learn how your comment data is processed.
© 2022 AppDividend All rights reserved.