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?

Answer 1

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