Using props.data with MDBNav, how to activate the active TAB or LINK

Question

With ReactJS i am using MDBNav from MDBreact.

This is the code od the container where is props.data defined:

import React from 'react'
import MiTabs from "../componentes/MiTabs";

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: '#!',
      }
    ]
  };
  render() {
    return (
      <div>
        {/*
        <MiTabs data={this.state.vpn} /> <br />
        <h2> Create an article </h2>
        <CustomForm requestType="post" articleID={null} btnText="Create" />
        */}
        <MiTabs  data={this.state.vpn}/>



      </div>
    );
  }
}
export default  VpnList;

This is the component 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 key={a.nombre}>  <MDBNavLink 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;

Every thing is working but there is a problem with "active" is not showing up.

The problem is coming from here:

The CSS I am using is:

import 'mdbreact/dist/css/mdb.css';
import './css/bootstrap.css';
import '@fortawesome/fontawesome-free/css/all.min.css';

If i remve the active option from the code is always active all the tabs. I shoutl be active on ly one when cliked, but now no one is active.

From somehere i receiveig this "active" class. I din´t find from where. How to debug this problem? Any ideas?

score 2 · Answer 1 · answered Mar 26 '20 at 09:45

Try to add prop link to MDBNavLink. MDBNavLink is a NavLink from react-router-dom, but in a component like tabs and pills you should use Link from react-router-dom

Check this solution:

    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> 
   //Add a link prop to component below
             <MDBNavLink link active='true' to={a.enlace}>
                {a.nombre} 
             </MDBNavLink>  
          </MDBNavItem>
          ))}

          <MDBNavItem>
   //Add a link prop to component below
            <MDBNavLink link active to="#!">Active</MDBNavLink>
          </MDBNavItem>
          <MDBNavItem>

   //Add a link prop to component below
            <MDBNavLink link to="#!">NO Active</MDBNavLink>
          </MDBNavItem>

        </MDBNav>

      </BrowserRouter>

      );
    };

    export default  MiTabs;

This code should work properly now.

tudor.gergely · Answer 2 · 2020-03-25T12:30:54.757

1

You need to specify the active option, not activo:

<MDBNavItem key={a.nombre}><MDBNavLink active={a.activo} to={a.enlace}>{a.nombre} </MDBNavLink></MDBNavItem>

By doing {a.active} you just add true to MDBNavLink (which doesn't make sense), you need to add active={true} instead

edited Mar 25 '20 at 12:30

answered Mar 25 '20 at 09:42

tudor.gergely

4,800
1
16
22

I had tried it and it didn't work.Below I add one natively as MDBreact example but not workig. Now I see it's something else. Thank you for your help. – Kentron.dna Mar 25 '20 at 10:47
@Kentron.dna what do you mean? – tudor.gergely Mar 25 '20 at 10:51
I have added it as you have suggested. Still not working. But I am also adding the native way: whithout using JS and also not working. – Kentron.dna Mar 25 '20 at 12:11
I just posted in a new post all the details. – Kentron.dna Mar 25 '20 at 12:28
You need to also add a key={a.nombre} to MDBNavItem – tudor.gergely Mar 25 '20 at 12:30
oh! sorry. Key added, it seems that is not the problem. :-( – Kentron.dna Mar 25 '20 at 12:45
Please edit this question with your latest code and show the entire component. Thanks – tudor.gergely Mar 25 '20 at 19:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/210337/discussion-between-kentron-dna-and-tudor-gergely). – Kentron.dna Mar 25 '20 at 21:13

Using props.data with MDBNav, how to activate the active TAB or LINK

2 Answers2