Browse map array with tsx

Asked

Viewed 180 times

0

I need to traverse an array within another array with array map, in the first loop I will show the categories and in the second I will show the products, I am able to go through, but I cannot show the category of products.

Following example.

{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 in code. inserir a descrição da imagem aqui

console.log(menus)

inserir a descrição da imagem aqui

App screen.

inserir a descrição da imagem aqui

react react-native

  • one console.log(menus) and put here to show help answer your question!

  • @Virgilionovic put more details

  • you are having trouble printing this correct complex list, it is not that it is not coming is that it has a lot of component to manage correctly?

  • @Virgilionovic correct. the products I’m listing but the category of them I’m not getting. The commented part of the code. I’m not getting it all together for lack of jsx experience.

  • @Virgilionovic wanted to do this. https://i.stack.Imgur.com/uyaqF.png

  • the problem is to print several components on the same map this is your question!

Show 1 more comment

1 answer

0


To use within an interaction method (map) several components need to work or with a <div> or with <React.Fragment> in the example below the excerpt from the very basic code that proves this:

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

and so on, the complete example:

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>

  • 1

    Thank you very much.

  • Funny taking a negative vote.

Browser other questions tagged react react-native

You are not signed in. Login or sign up in order to post.