how to activate the active TAB or LINK in the MDBNav of MDBreact.?

Question

This is my code:

import React from "react";
import { BrowserRouter } from 'react-router-dom';
import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";

const MiTabs = props => {

return (

  <BrowserRouter>
    <MDBNav className="nav-tabs mt-5">
    {props.data.map(a => (
      <MDBNavItem>  <MDBNavLink active='true' to={a.enlace}>{a.nombre} </MDBNavLink>  </MDBNavItem>
      ))}

      <MDBNavItem>
        <MDBNavLink  active to="#!">Active</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink to="#!">NO Active</MDBNavLink>
      </MDBNavItem>

    </MDBNav>

  </BrowserRouter>

  );
};

export default  MiTabs;

The active tab is not working:

The content of my props.data:

class VpnList extends React.Component {
  state = {
    vpn: [
      {
        nombre: 'Test1',
        activo: true,
        enlace: '#!',
      },
      {
        nombre: 'Test2',
        activo: false,
        enlace: '#!',
      },
      {
        nombre: 'Test3',
        activo: false,
        enlace: '#!',
      },
      {
        nombre: 'Test4',
        activo: false,
        enlace: '#!',
      }
    ]
  };

I am using Tabs from MDBreact:

Any idea what coould be the issue?

Thanks

I a using the default complet css from react bootstrap. According to the MDB reaact the css is: .nav-tabs

In my index.js:
import 'mdbreact/dist/css/mdb.css';

And in my

App.js: import './css/bootstrap.css';

How to solve this pronlem?

Answer 1

I made an example for you. I used React Hooks instead of the class components but the logic is the same.

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { MDBNav, MDBNavItem, MDBNavLink } from 'mdbreact';

export default function MITabs() {
  const data = [
    {
      nombre: 'Test1',
      activo: true,
      enlace: '/test1'
    },
    {
      nombre: 'Test2',
      activo: false,
      enlace: '/test2'
    },
    {
      nombre: 'Test3',
      activo: false,
      enlace: '/test3'
    },
    {
      nombre: 'Test4',
      activo: false,
      enlace: '/test4'
    }
  ];

  const [activated, setActivated] = React.useState(0);
  const toggleActivated = index => activated !== index && setActivated(index);

  return (
    <BrowserRouter>
      <MDBNav className='nav-tabs mt-5'>
        {data.map((a, index) => (
          <MDBNavItem key={a + index}>
            <MDBNavLink
              to={a.enlace}
              active={activated === index}
              onClick={() => toggleActivated(index)}
              role='tab'
            >
              {a.nombre}
            </MDBNavLink>
          </MDBNavItem>
        ))}

        <MDBNavItem>
          <MDBNavLink active to='#!'>
            Active
          </MDBNavLink>
        </MDBNavItem>
        <MDBNavItem>
          <MDBNavLink to='#!'>NO Active</MDBNavLink>
        </MDBNavItem>
      </MDBNav>
    </BrowserRouter>
  );
}