使用props.data为我的React proyect自动构建MDBNav

Question

我对React非常陌生，需要一点帮助。我试图创建一个从props接收数据的组件，并自动创建所有必要的标签：

我正在使用MDBreact的MDBNav。

想法是将数据（Test1，Test2，Test3，Test4）获取到minavegación选项卡的选项卡名称。

props.data是我可以正确接收数据的位置。

这是我的代码，我不知道如何在for中插入我的JSX并使用正确的名称重新调整MDBNav。

这是我的代码开始的位置：

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;

非常感谢。

Answer 1

为我工作：

return (

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

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

    </MDBNav>
  </BrowserRouter>

  );
};