0

Preciso percorrer um array dentro de outro array com array map, no primeiro laço vou mostrar as categorias e no segundo vou mostrar os produtos, estou conseguindo percorrer, mas não consigo mostrar a categoria dos produtos.

Segue exemplo.

{menus.map(item =>
    // ------------ não funciona ---------------------
    <Header key={item.id}>
        <Title>{item.no_categoria_cardapio}</Title>
    </Header>
    // ------------ fim não funciona ---------------------
    // ------------ está funcionado ---------------------

    item.produtos.map(product => (
        <Card key={product.id}>
            <CardHeader>
                <Avatar
                    source={{
                        uri:
                            environment.apiImgBackend +
                            '/produtoCardapio/' +
                            product.img,
                    }}
                />
                <CardInfo>
                    <NameCompanyView>
                        <NameCompany>
                            {product.nome}
                        </NameCompany>
                    </NameCompanyView>

                    <Description>
                        {product.descricao}
                    </Description>
                </CardInfo>
            </CardHeader>
        </Card>
    )),
    // ------------ fim está funcionado ---------------------
)}

Ex em código. inserir a descrição da imagem aqui

console.log(menus)

inserir a descrição da imagem aqui

Tela do app.

inserir a descrição da imagem aqui

6
  • um console.log(menus) e colocar aqui para mostrar ajuda a responder a sua pergunta!
    – novic
    27/08/2020 às 21:16
  • @VirgilioNovic coloquei mais detalhes
    – Herick
    27/08/2020 às 21:46
  • você está tendo problema em imprimir essa lista complexa correto, não é que não está vindo é que tem um monte de componente para gerenciar correto?
    – novic
    27/08/2020 às 21:50
  • @VirgilioNovic correto. os produtos eu estou listando mas a categoria deles não estou conseguindo. A parte comentada do código. Não estou conseguindo juntar tudo por falta de experiência com o jsx.
    – Herick
    27/08/2020 às 21:54
  • @VirgilioNovic queria fazer isso. i.stack.imgur.com/uyaqF.png
    – Herick
    27/08/2020 às 21:56

1 Resposta 1

0

Para utilizar dentro de um método de interação (map) vários componentes precisar trabalhar ou com um <div> ou com <React.Fragment> no exemplo abaixo o trecho do código bem básico que comprova isso:

{items.map((item, i) => (
  <React.Fragment key={i}>
    <Header title={item.title} />
    {item.produtos.map((produto, ix) => (
      <Body key={ix} produto={produto}/>
    ))}        
  </React.Fragment>
))}

e assim por diante, o exemplo completo:

function Header({title}) {
  return <h1>{title}</h1>
}
function Body({produto}) {
  return (
    <div>
      <h4>Sub Titulo: {produto.sub}</h4>
      <p>Valor: {produto.value}</p>
    </div>
  )
}
function App() {
  const [items, setItems] = React.useState([
    { title: 'title 1', produtos:[ 
        {sub:'1a', value: 1 }, 
        {sub:'2a', value: 2 }] 
    },
    { title: 'title 2', produtos:[ {sub:2, value: 2 }] },
    { title: 'title 3', produtos:[ {sub:3, value: 3 }] },
  ]);
  return (
   <div>
    {items.map((item, i) => (
      <React.Fragment key={i}>
        <Header title={item.title} />
        {item.produtos.map((produto, ix) => (
          <Body key={ix} produto={produto}/>
        ))}        
      </React.Fragment>
    ))}
   </div>
  );
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

2
  • 1
    Muito obrigado.
    – Herick
    27/08/2020 às 23:35
  • Engraçado levar um voto negativo.
    – novic
    3/09/2020 às 13:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .