react tabs

Manamapps asked 5 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 5 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>

Manamapps answered 5 years ago

great. works. thanks


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: 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
Tags