Way to check if first iteration in map

Question

I'm trying to add a class to an element within ReactJS using the map function, but ONLY for the first one in the loop, is this possible / an easy way?

return (
  <div key={itemData.itemCode} className="item active">
    Want to add 'active' class when the first but for the others dont add it
  </div>
)

Can you explain where your map function is being used? It's not present in the code snippet. — adrianp
– adrianp, Commented Dec 22, 2015 at 14:32
the second argument for the map callback function is the index, so you can check if the index is zero: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — patrick
– patrick, Commented Dec 22, 2015 at 14:34

Oleksandr T. · Accepted Answer · 2019-07-23 04:00:46Z

If you use .map or .forEach then you can do it like this

var List = React.createClass({
    render: function() {
      var lists = this.props.data.map(function (itemData, index) {
         /// if index === 0 ( it is first element in array ) then add class active 
         var cls = (index === 0) ? 'item active' : 'item'; 

         return <div key={itemData.itemCode} className={ cls }>
           { itemData.itemValue }
         </div>;
      })
      return <div>{ lists }</div>;
    }
});

Example

also there is good package called classnames if you need conditionally change classes, like as in your case

var List = React.createClass({
    render: function() {
      var lists = this.props.data.map(function (itemData, index) {
        return <div 
            key={itemData.itemCode} 
            className={ classnames('item', { active: index === 0 }) }>
          { itemData.itemValue }
        </div>
      })
      return <div>{ lists }</div>;
    }
});

Example

Steve Chambers · Accepted Answer · 2024-02-23 10:53:45Z

1

Here is a slight simplification of the accepted answer for the general case:

items.map(item, index) => {
  if (index === 0) {
    // First item...
  }
  // ...
}

answered Feb 23, 2024 at 10:53

Steve Chambers

39.8k29 gold badges178 silver badges222 bronze badges

Collectives™ on Stack Overflow

Way to check if first iteration in map

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related