Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Iterando sobre Array de Objetos

por Daniel Ferreira Kaneko
| 81k xp | 2 posts

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á!

1 resposta
solução!
por Daniel Ferreira Kaneko
| 81k xp | 2 posts

Solucionado com:

import React, { Component } from "react";
import NavItems from "./navItems";
import "./style.css";

class HeaderNav extends Component {
  constructor() {
    super();
    this.state = {
      navItems: [],
    };
  }

  componentWillMount() {
    this.setState({
      navItems: [
        {
          item: "Home",
          link: "#",
        },
        {
          item: "Histórico",
          link: "#",
        },
        {
          item: "Preferências",
          link: "#",
        },
        {
          item: "Indique",
          link: "#",
        },
        {
          item: "Sobre",
          link: "#",
        },
      ],
    });
  }
  state = {};
  render() {
    return (
      <nav>
        <NavItems navItems={this.state.navItems} />
      </nav>
    );
  }
}

export default HeaderNav;

import React, { Component } from "react";
import HeaderSearchBox from "./headerSearchBox/headerSearchBox.jsx";

class NavItems extends Component {
  state = {};
  render() {
    return (
      <ul className="header__nav">
        {this.props.navItems.map((navItems, key) => (
          <li className="header__nav___list-items">
            <a key={key} href={navItems.link}>
              {navItems.item}
            </a>
          </li>
        ))}
        <li className="header__nav___list-items">
          <HeaderSearchBox />
        </li>
      </ul>
    );
  }
}

export default NavItems;