React - Loop within a loop

Question

Building out a Nav from JSON. If an item has children I need to run some before and after code around the children's loop. My if statement works and all singles are created correctly. It creates the dropdown component however the inner loop isn't running. It's reading it as html.

render() {
    return menuLocal.items.map((menu, i) => {
        return (
          <div key={i}>            
            {(menu.children) ? (
                    <UncontrolledDropdown nav inNavbar>
                        <DropdownToggle nav caret>
                            {menu.title}
                        </DropdownToggle>
                    <DropdownMenu right>

                    menu.children.map((children, i) => {
                        <NavItem key={'children-'+i}>
                            <Link to={menu.object_slug} className="nav-link">{menu.title}</Link>
                        </NavItem>
                    })

                    </DropdownMenu>
                </UncontrolledDropdown>
              
            ): 
                <NavItem>
                    <Link to={menu.object_slug} className="nav-link">{menu.title}</Link>
                </NavItem>
            }
          </div>
        )
      })

    }

Here is a live link that shows the issue in the Nav. http://attorneytemplate.netlify.com/

Same result. It appears the problem is React doesn't know I'm running another function. It's reading it as though it is a component, so its printing "menu.children.map.etc" — C Porter
– C Porter, Commented May 14, 2018 at 12:04

ChrisR · Accepted Answer · 2018-05-14 12:02:34Z

1

Try wrapping your code with curly brackets. Javascript code inside JSX must be wrapped.

And add a return to your inner map.

{
menu.children.map((children, i) => {
                    return (<NavItem key={'children-'+i}>
                        <Link to={menu.object_slug} className="nav-link">{menu.title}</Link>
                    </NavItem>);
                })
}

answered May 14, 2018 at 12:02

ChrisR

3,9981 gold badge18 silver badges24 bronze badges

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

1 Comment

C Porter Over a year ago

Thanks! I'm much closer. It understands it is a new function. However it's not running the iteration/loop. It's coming back blank, ie an empty dropdown.

Manoz · Accepted Answer · 2018-05-14 12:04:01Z

0

You have curly brackets here. Either you return the object or do it in this way -

 menu.children.map((children, i) => 
                        <NavItem key={'children-'+i}>
                            <Link to={menu.object_slug} className="nav-link">{menu.title}</Link>
                        </NavItem>
                    )

Just remove those curly parenthesis. As it its still an object inside {} until you return it.

answered May 14, 2018 at 12:04

Manoz

6,62713 gold badges72 silver badges117 bronze badges

Collectives™ on Stack Overflow

React - Loop within a loop

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related