Title: React & clsx: add a class name if the current item in a mapped array is the first of multiple items
Tags: javascript;reactjs;typescript;clsx
Question: I've got the following code, and I need to add some new functionality to it. Basically, the map function is iterating through an array, and if there is only one item in the array, then I don't want to add a new class, but if this is the first item in an array of 2 items, I want to add a class name.
```                            {section?.values?.link.map((link, index) =&gt; {
                              return (
                                <LinkComponent
                                  key={index}
                                  className={clsx({
                                    &quot;jc-left&quot;:
                                      link?.values?.linkType !== 
                                      &quot;primary-button&quot;,
                                  })}
                                </LinkComponent&gt;
                              ...
```
I know it looks like the one that's already there, in that I put in the class name in quotes followed by a semicolon and then the rule, I just don't know how to write what seems like a complex rule to me. Any help is appreciated.


Here is the accepted answer: If I correctly understand your question is that you want to add className if you ```array.length &gt; 1``` and then add class to the first item of the array.
```{section?.values?.link.map((link, index, self) =&gt; {
return (
    <LinkComponent
          key={index}
          className={clsx({
            &quot;jc-left&quot;: link?.values?.linkType !== &quot;primary-button&quot;,
             &quot;YOUR_CLASS&quot;: self.length &gt; 1 &amp;&amp; index === 0,
          })}
    </LinkComponent&gt;

```
But what if you have more than two items then I assume that you will add class to all items except the last one
```{section?.values?.link.map((link, index, self) =&gt; {
return (
    <LinkComponent
          key={index}
          className={clsx({
            &quot;jc-left&quot;: link?.values?.linkType !== &quot;primary-button&quot;,
             &quot;YOUR_CLASS&quot;: self.length &gt; 1 &amp;&amp; (index + 1 !== self.length),
          })}
    </LinkComponent&gt;
```

Comment for this answer: I didn't know about map's self param. That's pretty cool.

Here is another answer: If you want to render conditionally with clsx you can do this based on the two conditions:
```{section?.values?.link.map((link, index) =&gt; {
  // Checks if array has more than 2 or 2 items and if the index is 0 which means that is the first item.
  const hasConditionalClass = section?.values?.link.length &gt;= 2 &amp;&amp; index === 0;

  return (
    <LinkComponent
      key={index}
      className={clsx({
       &quot;jc-left&quot;: link?.values?.linkType !== &quot;primary-button&quot;,
       &quot;condtional-class&quot;: hasConditionalClass
       })}
    </LinkComponent&gt;
    ...
```


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2022:00:04/06/22', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><reactjs><typescript><clsx>', 'Title': 'React & clsx: add a class name if the current item in a mapped array is the first of multiple items', 'ViewCount': 205, 'id': 71770213, 'user_AboutMe': "<p>I am a designer and front end web developer, currently working for Cardinal Health.  I use the term 'designer', because there isn't any one specific space I limit myself.  I love illustration, web design, web development, information architecture, usability, interaction, patterns, digital art, information visualization, you name it.  I love to 'design' stuff!</p>\n", 'user_AccountId': 953623.0, 'user_DisplayName': 'Mike Earley', 'user_Reputation': 1093.0, 'user_Views': 140.0, 'user_id': 1094058.0}}