React: iterating through javascript object key values

Question

How do I put my props object into an array and iterate through it?

I have a bootstrap navigation bar that has dropdowns. My code scans the javascript object and if the key dropdown is found, it will create a dropdown menu from the data in the javascript object from the dropdown section.

My Javascript Object:

var linksNav = {
    items: [
        {
            "type": "link",
            "title": "Events",
            "href": "#",
            "target": "_self"
        },
        {
            "type": "link",
            "title": "Groups",
            "href": "#",
            "target": "_self",
            "dropdown": 
                {
            "dropItems":
                    [
                        { 
                        "left": "1st left", 
                        "left-option": ["1","2"] 
                        },
                        { 
                        "left": "2nd left", 
                        "left-option": ["1","2"] 
                        },
                        { 
                        "left": "3rd left", 
                        "left-option": ["1","2"] 
                        },
                    ]
                }
        },
        {
            "type": "heading",
            "title": "Capabilities",
            "href": "#",
            "target": "_self"
        },
    ]
}

This is my LinksNav class which creates the navigation bar by going through the javascript object. If a dropdown item is detected in my javascript object, it will pass it to my Navsub component:

LinksNav:

var LinksNav = React.createClass({

    render: function() {

    let navDrop;        
    if (this.props.isDropdown) {
      navDrop = (
        <ul className="dropdown-menu fade">
        <div>{this.props.isDropdown.dropItems[0].left}></div>
         <Navsub isDropdown = {this.props.isDropdown}/>
        </ul>
      )
    }
        return (

            <li className={this.props.title + ' nav-items'}>

             <a href={this.props.href} target={this.props.target} className={this.state.color + ' dropdown-toggle'} onClick={this.onClick} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{this.props.title}</a>

  {navDrop}       
            </li>

        );
    }
});

Navsub: This is my Navsub class where I try to spit out the data from my dropdown list in my Javascript object if it can find it. :

   var Navsub = React.createClass({
    render: function() {

        var itemsLeft= [];
       for (var j = 0; j < this.props.isDropdown.dropItems.length; j++) {
            itemsLeft.push(<Navsubrightitems key={j} type={this.props.isDropdown.dropItems[j].left} />);
        }
        return (
            <div className="group-dropdown-menu">
            <div className="dropdown-left-menu">

             {this.props.isDropdown.dropItems[0].left}
             {this.props.isDropdown.dropItems[1].left}
            </div>
             <div className="dropdown-right-menu">
            {itemsRight}

            </div>
            </div>
        );
    }
});

I can successfully grab the dropdown list from the json object throuhh props, as seen by my hardcoding:

{this.props.isDropdown.dropItems[0].left}
{this.props.isDropdown.dropItems[1].left}

, but I want to iterate through it so that I get the value of left under dropItems by putting it in an array and then spitting out those values. I attempted to do so by iterating it through this.props.isDropdown.dropItems.length , but seems that's not valid as I get an undefined error.

Answer 1

I think, this is what you want, Write it like this:

{
     this.props.isDropdown.dropItems && this.props.isDropdown.dropItems.map((item,i) => {
          return <Navsubrightitems key={i} type={item.left} />
     })
}

Answer 2

It seems that the props dropDownItems are not initially present and hence you need to check for and undefined value and then you can use map to iterate over these. You can do it as follows

var Navsub = React.createClass({
    render: function() {


        return (
            <div className="group-dropdown-menu">
            <div className="dropdown-left-menu">

             {this.props.isDropdown.dropItems[0].left}
             {this.props.isDropdown.dropItems[1].left}
            </div>
             <div className="dropdown-right-menu">
            {this.props.isDropdown.dropItems && this.props.isDropdown.dropItems.map((listItem, index) => {
                 return <Navsubrightitems key={index} type={listItem.left} />
               })}
            </div>
            </div>
        );
    }
});