Accessing deeper array keys

Question

I am trying to create a navigation menu which supports dropdown items. I have created

var menuItems={
items:[
{
    title:"Home",
    id:1
},
{
    title:"Download App",
    children:["iOS","Android","Windows"],
    id:2
},
{
    title:"About",
    id:3
}
]
};

This is my Menu Prototype Class:

var MenuProto = React.createClass({
render: function(){
    return <li><a>{this.props.title}</a>
      <ul className="dropdown-menu">
        <li><a>{this.props.children}</a></li>
      </ul>
    </li>
}
});

And this is where it is called:

var Menu = React.createClass({
  render : function(){
    var fullmenu = this.props.items.map(function(item){
       return <MenuProto {...item}/>
    });
    return <ul className="nav navbar-nav navbar-right">
       {fullmenu}
    </ul>
  }
});

Apparently this.props.children gets all the array and uses renders it on the menu while I need it to get them one by one. I have tried creating a var similar to fullmenu which would iterate through childrens of this.props.children one by one but I can't figure out how.

I would also need a hint on how to make a conditional to see if an object has or doesnt have the children key.

Any help would be greatly appreciated.

Michelle Tilley · Accepted Answer · 2015-12-19 19:09:53Z

1

You can iterate on this.props.children using the React.Children utilities:

var MenuProto = React.createClass({
render: function(){
    return <li><a>{this.props.title}</a>
      <ul className="dropdown-menu">
        {React.Children.map(this.props.children, function(child) {
          return <li key={child.id}><a>{child.title}</a></li>
        })}
      </ul>
    </li>
}
});

Since you want to support nested items, you'll need some additional custom logic.

You can check to see if an object has a children key by simply testing for the existence of whatever.children; if it doesn't have that key, it will be a falsy value (specifically undefined).

answered Dec 19, 2015 at 19:09

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

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

1 Comment

as__ Over a year ago

Yes, that's exactly what I needed. Anyway upon reading the documentation for React.Children it came to my attention the function fn (child) { where when invoking fn it is said that if the children is null or undefined it returns null or undefined, and as such saving me a lot of hassle!

Collectives™ on Stack Overflow

Accessing deeper array keys

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related