Topic: react tabs
Manamapps free asked 4 years ago
Expected behavior active should only be when tab is clicked Actual behavior all tabs are always active regardless what i put in the "active" attribute. and when i click on a tab it adds another "active" class to its existing one. Resources (screenshots, code snippets etc.)
<div className="classic-tabs">
<MDBNav classicTabs color="orange" className="">
<MDBNavItem>
<MDBNavLink to="#" active={activeItemClassicTabs3==="1"} onClick={() => toggleClassicTabs3("1")}>
<MDBIcon icon="user" size="1x" />
<br />
Info
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#" active={activeItemClassicTabs3==="2"} onClick={() => toggleClassicTabs3("2")}>
<MDBIcon icon="heart" size="1x" />
<br />
Sureys
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#" active={activeItemClassicTabs3==="3"} onClick={() => toggleClassicTabs3("3")}>
<MDBIcon icon="user" size="1x" />
<br />
Tiles
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#" active={activeItemClassicTabs3==="4"} onClick={() => toggleClassicTabs3("4")}>
<MDBIcon icon="heart" size="1x" />
<br />
Models
</MDBNavLink>
</MDBNavItem>
</MDBNav>
Piotr Glejzer staff answered 4 years ago
Hello,
Yes, you are right. Nav link component has a bad structure. We have a workaround about that and we added prop link
what changes a nav link to normal link from react-router-dom and there is no reference to URL address about that and there is no problem with class active
.
We will release new component call 'MDBLink
which will solve this issue with 5.0.0 version ( probably in 20th of January)
Try this code:
<div className="classic-tabs">
<MDBNav classicTabs color="orange" className="">
<MDBNavItem>
<MDBNavLink link to="#" active={activeItemClassicTabs3==="1"} onClick={() => toggleClassicTabs3("1")}>
<MDBIcon icon="user" size="1x" />
<br />
Info
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to="#" active={activeItemClassicTabs3==="2"} onClick={() => toggleClassicTabs3("2")}>
<MDBIcon icon="heart" size="1x" />
<br />
Sureys
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to="#" active={activeItemClassicTabs3==="3"} onClick={() => toggleClassicTabs3("3")}>
<MDBIcon icon="user" size="1x" />
<br />
Tiles
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to="#" active={activeItemClassicTabs3==="4"} onClick={() => toggleClassicTabs3("4")}>
<MDBIcon icon="heart" size="1x" />
<br />
Models
</MDBNavLink>
</MDBNavItem>
</MDBNav>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.23.1
- Device: desktop
- Browser: chrome
- OS: windows 10
- Provided sample code: No
- Provided link: No