How to run nested map in Reactjs?

Question

How to return different component using map function. How to apply condition inside of map function

I am trying to return a component if subMain is true then return that part of component and if subMain is false then return that part of component.

But here the error in the structure only . the error shows here !subMain

Update: I tried another way but this throws error in second return and in const MainPath

            {states &&            
            states.map(({ Main }) => (
                Main.map(({component , subMain}) => (
                    const MainPath = `/${component}`
                    const MainComponent = `${component}`
                    subMain ? subMain.map(({ component }) => {
                        
                            const Path = `/${component}`
                            const Component = `${component}`
                            return (
                                <Protected
                                path={Path}
                                component={Component}
                                exact
                            />
                            )
                        }):
                            return (
                                <Protected
                                path={MenuPath}
                                component={MenuComponent}
                                exact
                            />
                            )
                                                    
                ))
            ))
        }

your subMain is not boolean!

Cuong DaoVan
– Cuong DaoVan

2020-09-11 17:12:48 +00:00
Commented Sep 11, 2020 at 17:12 — Cuong DaoVan
– Cuong DaoVan, Commented Sep 11, 2020 at 17:12

Moshe Sommers · Accepted Answer · 2020-09-11 18:14:45Z

1

Edit : After question was updated i think there were just some syntax errors and missing return statement

You're running 2 expressions instead of just one return value. You should use a ternary like so

  {states &&            
        states.map(({ Main }) => (
            Main.map(({component , subMain}) => {
                const MainPath = `/${component}`
                const MainComponent = `${component}`
                return subMain ? subMain.map(({ component }) => {
                    
                        const Path = `/${component}`
                        const Component = `${component}`
                        return (
                            <Protected
                            path={Path}
                            component={Component}
                            exact
                        />
                        )
                    }):
                  (
                      <Protected
                         path={MenuPath}
                         component={MenuComponent}
                         exact
                      />
                  )
                                                
            })
        ))
    }

edited Sep 11, 2020 at 18:14

answered Sep 11, 2020 at 17:13

Moshe Sommers

1,5068 silver badges13 bronze badges

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

6 Comments

Akhi21 Over a year ago

using this it continuous runs it does not stops

Moshe Sommers Over a year ago

Hmmm you're looping through states and then Main.Map and then possibly Main.Map again - kind of problematic but not related to the core question... Still shouldn't go forever although I don't know what the data looks like

Akhi21 Over a year ago

I tried another approach and update the question too but it throws error

Moshe Sommers Over a year ago

@Akhi21 You're new way is missing 'retrun on line 6 return subMain ? .. You can only leave out the return if all you're code is being returned...

Akhi21 Over a year ago

So do i need to wrap up the whole content inside of return?

|

Collectives™ on Stack Overflow

How to run nested map in Reactjs?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related