checking for first key in map with reactjs

Question

I've got the following component in ReactJS

var MainMenu = React.createClass({
                render: function() {
                    console.log(this.props.groupsData);
                    var categories = this.props.groupsData.objects.map(function(obj){
                        return (<li><a href="#">{obj.display_name}</a></li>);   
                    });
                    return (<div className="MainMenu">
                            <ul className="nav nav-pills">{categories}</ul>

                        </div>);
                }
            });

Now, I wish to add className='active' to the <li> element if its the first in the map. How would I achieve this?

Ruan Mendes · Accepted Answer · 2015-06-19 11:55:12Z

2

Use JS in your expression

var MainMenu = React.createClass({
  render: function() {
    console.log(this.props.groupsData);
    var categories = this.props.groupsData.objects.map(function(obj, index) {
      // You can have a JavaScript expression in your expression 
      return ( <li className={index == 0 ? 'active' : ''}> <a href="#">{
        obj.display_name
      }</a></li> );
    });
    return ( <div className="MainMenu" >
      <ul className="nav nav-pills" >{
        categories
      }</ul>

   </div> );
  }
});

answered Jun 19, 2015 at 11:55

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

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

2 Comments

Llanilek Over a year ago

Brilliant, I tried using an expression before, but got a strange error, but this works perfectly. Thank you.

tirdadc Over a year ago

Documentation on the .map method: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Collectives™ on Stack Overflow

checking for first key in map with reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related