Tudo bem, pessoal?
Estou tentando criar um Nav bar em cima de um Array (para fins de estudo), mas estou me enrolando. Poderiam me apontar em um caminho? Estou separando os componentes da seguinte forma:
Meu HeaderNav contém o array e monta a "ul"
import React, { Component } from "react";
import HeaderSearchBox from "../headerSearchBox/headerSearchBox.jsx";
import NavItems from "./navItems";
let navItemsArray = [
{
item: "Histórico",
link: "#",
},
{
item: "Preferências",
link: "#",
},
{
item: "Indique",
link: "#",
},
{
item: "Sobre",
link: "#",
},
];
class HeaderNav extends Component {
state = {};
render() {
return (
<nav>
<ul>
{navItemsArray.map((navItem) => {
return <NavItems />;
})}
<li className="header__nav___list-items">
<HeaderSearchBox />
</li>
</ul>
</nav>
);
}
}
export default HeaderNav;Ele recebe a classe NavItems que vai construir as "li"s dentro da "ul" do HeaderNav:
import React, { Component } from "react";
class NavItems extends Component {
state = {};
render() {
return (
<li>
<a href={navItem.link???}>
{navItem.item???}
</a>
</li>
);
}
}
export default NavItems;Minha confusão está em enviar os dados do Array p/ o filho e acessar as propriedades nele.
Agradeço desde já!
