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
                            />
                            )
                                                    
                ))
            ))
        }

Answer 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
                      />
                  )
                                                
            })
        ))
    }