How can I dynamically display an array of arrays?

Question

How do i dynamically display an array that has multiple arrays. The nested arrays have multiple objects.

e.g.

Var obj = 
[
  [
    {
      name: "Test 1",
      category: "Test 1"
    }, 

    {
      name: "Test 2",
      category: "Test 1"
    }, 
  ],

  [
    {
      name: "Test 1",
      category: "Test 2"
    }, 

    {
      name: "Test 2",
      category: "Test 2"
    }, 
  ]
]

So how do i dynamically display this and render it in a react component I tried [below] and it works perfect and displays the first array-object, but i cant figure out a way to make it display the rest

list = obj[0].map((e, index) => {  
   return (
      <div key={index}>
         <p>{e.name}</p>
         <h6>{e.category}</h6>
      </div>
   )
})

return (
   <div>
      {list}             
   </div>
)

Dancrumb · Accepted Answer · 2019-06-19 14:15:04Z

1

You have a couple of options here.

One is to explicitly loop over the outer array and then the inner arrays:

const list = obj.map(cat => cat.map((e, index) => {  
   return (
      <div key={index}>
         <p>{e.name}</p>
         <h6>{e.category}</h6>
      </div>
   )
}));

The problem here is that index will not be unique on the page. As a general rule, you should not be using an array index as a component key anyway. You'd be better off using something like

   (
      <div key={`${e.name}-${e.category}`}>
         <p>{e.name}</p>
         <h6>{e.category}</h6>
      </div>
   )

Another approach would be to flatten the array:

const list = [].concat(...obj).map(e => (
  <div key={`${e.name}-${e.category}`}>
    <p>{e.name}</p>
    <h6>{e.category}</h6>
  </div>
);

answered Jun 19, 2019 at 14:15

Dancrumb

27.7k10 gold badges79 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Vencovsky Over a year ago

I think the correct way would be a recursive function.

Emile Bergeron Over a year ago

@Vencovsky there's no "correct way" here. It's a matter of preference and there's nothing wrong with simple loops or flattening.

Vencovsky Over a year ago

@EmileBergeron, sorry. I think that a recursive function would be a better way if the object can have more than 2 levels of nested arrays.

Dancrumb Over a year ago

@Vencovsky sounds like the beginning of a good answer :) That said, since the OP is struggling with nested arrays, I'd guess they might struggle with recursion (no disrespect intended to OP... we all have to start somewhere!)

Emile Bergeron Over a year ago

@Vencovsky in that case, it would be a good point since it would invalidate flattening and simple loops anyway ;)

|

Collectives™ on Stack Overflow

How can I dynamically display an array of arrays?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related