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          


        

Answer 1

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.

Answer 2

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