How to render two nested maps inside a map in React?

Question

I want to Map following state:

const initialState = {
    outer: [
        {
            inner1: [
                {  a: 'aaa' },
                {  b: 'bbb'}
                ......
            ],
            inner2: [
                {  c: 'ccc' },
                {  d: 'ccc'}
                ......
            ]
        },
        {
            inner1: [
                {  a: '111' },
                {  b: '222'}
                ......
            ],
            inner2: [
                {  c: '333' },
                {  d: '444'}
                ......
            ]
        },
        ......
    ]
}

And here, what I tried so far:

render() {
  return (
    {
      outer.map(({ inner1, inner2 }) => (
        inner1.map(({ a, b }) => (
              // do something
              <p> { a }</p>
              <p> { b }</p>
          )),
        inner2.map(({ c, d }) => (
              // do something
              <p> { c }</p>
              <p> { d }</p>
          ))
      ))
    }
  )
}

But the above solution is mapping data of one inner state (inner2) only. So, how can I render such a structure using map? Suggest any other better approach as well if any.

zmag · Accepted Answer · 2020-07-30 06:20:47Z

2

You are using comma operator which ignores the first expression and returns latter one.

Use Array.prototype.concat method to merge two arrays.

return(
{
outer.map(({ inner1, inner2 }) => (
        inner1.map(({ a, b }) => (
              // do something
              <p> { a }</p>
              <p> { b }</p>
          )).concat(inner2.map(({ c, d }) => (
              // do something
              <p> { c }</p>
              <p> { d }</p>
          )))
      ))}
)

edited Jul 30, 2020 at 6:20

answered Jul 30, 2020 at 4:42

zmag

8,27112 gold badges39 silver badges47 bronze badges

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

1 Comment

kartik tyagi Over a year ago

Yeah, it worked, but partially. Actually inner1 & inner2 both have different type (or name) of items. eg: your answer is returning a total of 6 elements, while inner1 has 2 elements and inner2 has 1 element in it. I updated my question to make it more understandable.

Ali Abu Hijleh · Accepted Answer · 2020-07-30 05:15:18Z

1

It depends on what you need, but I think here's what you are looking for:


return(
{
  outer.map(({ inner1, inner2 }) => {
    
    let a = inner1.map(({ data }) => (
        // do something
    ));

    let b = inner2.map(({ data }) => (
        // do something
    ));

   return something here

  })
}
)

answered Jul 30, 2020 at 5:15

Ali Abu Hijleh

5023 silver badges10 bronze badges

3 Comments

kartik tyagi Over a year ago

didn't help! I updated my question to make it more understandable.

Ali Abu Hijleh Over a year ago

can you also show what's the final result you want to be rendered? still not clear what you are asking for.

kartik tyagi Over a year ago

I just want to get (say print) whatsoever is therein (a, b, c, d) that's it.

Collectives™ on Stack Overflow

How to render two nested maps inside a map in React?

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related