react tabs

Topic: react tabs

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

Add comment

Piotr Glejzer staff answered 6 years ago

0 0 Best answer

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>

Add comment

Manamapps answered 6 years ago

0 0 Best answer

great. works. thanks

Add comment