Skip to content

Instantly share code, notes, and snippets.

@FMCorz
Last active September 20, 2023 08:02
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save FMCorz/b2d2f4cf6839c4f7402fecd32c84b680 to your computer and use it in GitHub Desktop.
Save FMCorz/b2d2f4cf6839c4f7402fecd32c84b680 to your computer and use it in GitHub Desktop.
ReactStrap Tabs using React hooks
import React, { useState } from 'react';
import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
export default function MyTabs(props) {
const [activeTab, setActiveTab] = useState('1');
return (
<div>
<Nav tabs>
<NavItem>
<NavLink className={activeTab == '1' ? 'active' : ''} onClick={() => setActiveTab('1')}>
Tab 1
</NavLink>
</NavItem>
<NavItem>
<NavLink className={activeTab == '2' ? 'active' : ''} onClick={() => setActiveTab('2')}>
Tab 2
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">Tab 1 Content</TabPane>
<TabPane tabId="2">Tab 2 Content</TabPane>
</TabContent>
</div>
);
}
@hamedhafez1
Copy link

thanks a lot

@twinkal00
Copy link

twinkal00 commented Feb 8, 2021

How to update the content of the table whenever the content changes?

@iamamanpandey
Copy link

thanks

@jasurkurbanov
Copy link

Thank you, can I use your code for both production and personal usage ?

@FMCorz
Copy link
Author

FMCorz commented Mar 7, 2022

@jasurkurbanovinit Yes, of course!

@okidonguyen88
Copy link

Thanks Pro

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment