Use props.data to construct auotmaticaly a MDBNav for my React proyect

Question

I am very new on React and I need a litle help. I tried to create a component that receive data from props and automaticaly create al necesary tabs:

I am using MDBNav from MDBreact.

The idea is to fetch the data ( Test1, Test2, Test3, Test4) to the name of the Tabs for mi navegación tab.

props.data is where I have my data receive correctly.

Here is my code I don´t know how to insert my JSX insde the for and retun a MDBNav with correct names.

Here is my code started:

import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";


const MiTabs = props => {
  console.log(props.data);

  for (let key in props.data) {
    console.log(key, props.data[key]);
  }


return (

  <BrowserRouter>

    <MDBNav className="nav-tabs mt-5">
      <MDBNavItem>
        <MDBNavLink active to="#!">Active</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink to="#!">Link 1</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink to="#!">Link 2</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink to="#!">Link 3</MDBNavLink>
      </MDBNavItem>
    </MDBNav>

  </BrowserRouter>



  );
};

export default  MiTabs;

Thank you very much.

score 0 · Answer 1 · answered Mar 25 '20 at 09:26

This work for me:

return (

  <BrowserRouter>
    <MDBNav className="nav-tabs mt-5">

      {props.data.map(a => (
      <MDBNavItem>  <MDBNavLink to={a.enlace}>{a.nombre} </MDBNavLink>  </MDBNavItem>
      ))}

    </MDBNav>
  </BrowserRouter>

  );
};

Use props.data to construct auotmaticaly a MDBNav for my React proyect

1 Answers1