Topic: MDBNavLinks setting active={false} not working

Nates premium asked 3 years ago


Expected behavior Expect NavLink to become active=false

Actual behavior Remains active regardless of adding active or not or active=false

Clicking between the tabs you can see the correct state values are there.

Even if you try to hard code false into active=false it still shows the link as being active.

Further, I tried MDBNavItem - active=false as well no luck

Am I doing something wrong?

Resources (screenshots, code snippets etc.)

import React, { useState } from "react"; import { MDBContainer, MDBNav, MDBNavLink, MDBNavItem, MDBTabContent, MDBTabPane } from "mdbreact";

const Lectures = () => {

const [activePill, setActivePill] = useState('1')
const togglePills = (tab) => e => {
    //e.preventDefault();
    setActivePill(tab)
}

return (
    <>
        <h1 className="mt-5 text-center">Test</h1>

        <MDBContainer>

            {
                // NavBar
            }

            <MDBNav pills color="secondary" className="nav-justified mt-5">
                <MDBNavItem>

                    <MDBNavLink
                        to="#tab1"
                        onClick={ togglePills("1") }
                        // active={ activePill === '1' }
                        active={ false }
                    >
                        Tab 1
                    </MDBNavLink>
                </MDBNavItem>

                <MDBNavItem>
                    <MDBNavLink
                        to="#tab2"
                        active={ activePill === '2' }
                        onClick={ togglePills("2") }
                    >
                        Tab 2
                    </MDBNavLink>
                </MDBNavItem>

            </MDBNav>


            {
                // Tabs
            }
            <MDBTabContent activeItem={ activePill }>
                <MDBTabPane tabId="1">
                    <p>Tab 1</p>
                    <p> Tab 1 = { (activePill === '1').toString() }</p>
                    <p> Tab 2 = { (activePill === '2').toString() }</p>
                </MDBTabPane>
                <MDBTabPane tabId="2">
                    <p>Tab 2</p>
                    <p> { activePill === '2' }</p>
                    <p> Tab 1 = { (activePill === '1').toString() }</p>
                    <p> Tab 2 = { (activePill === '2').toString() }</p>
                </MDBTabPane>
            </MDBTabContent>

        </MDBContainer>
    </>

);

};

export default Lectures;


Jakub Chmura staff answered 3 years ago


Hi @Nates

We know what's wrong with tabs/pills... and other components using MDBNavLink but we need to implement the solution and test this fix. In this case, there was a problem with the react-router library. We've found that the problem only occurs locally. If you put the project on the web, everything should be ok.

We're currently working to resolve the issue, but one of our users has implemented a temporary solution. Mabe this fix will help you with your problem.

I will paste its temporary fix below:

A temporary fix would be to remove all active classes using JavaScript, and then setting the active manually. This can be achieved by using React DOM References (like Ref={this.tab1}) and then removing all classes using removeAttribute("class") on this reference. Then setting the previous classes + active if used.

Best regards,

Kuba



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: 4.21.1
  • Device: All
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No