React & clsx: add a class name if the current item in a mapped array is the first of multiple items

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) => {
                              return (
                                <LinkComponent
                                  key={index}
                                  className={clsx({
                                    "jc-left":
                                      link?.values?.linkType !== 
                                      "primary-button",
                                  })}
                                </LinkComponent>
                              ...

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.

score 1 · Accepted Answer · answered Apr 06 '22 at 16:45

If I correctly understand your question is that you want to add className if you array.length > 1 and then add class to the first item of the array.

{section?.values?.link.map((link, index, self) => {
return (
    <LinkComponent
          key={index}
          className={clsx({
            "jc-left": link?.values?.linkType !== "primary-button",
             "YOUR_CLASS": self.length > 1 && index === 0,
          })}
    </LinkComponent>

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) => {
return (
    <LinkComponent
          key={index}
          className={clsx({
            "jc-left": link?.values?.linkType !== "primary-button",
             "YOUR_CLASS": self.length > 1 && (index + 1 !== self.length),
          })}
    </LinkComponent>

I didn't know about map's self param. That's pretty cool. – Mike Earley Apr 06 '22 at 20:20 — Mike Earley, Apr 06 '22 at 20:20

jean182 · Answer 2 · 2022-04-06T16:58:33.133

If you want to render conditionally with clsx you can do this based on the two conditions:

{section?.values?.link.map((link, index) => {
  // 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 >= 2 && index === 0;

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

React & clsx: add a class name if the current item in a mapped array is the first of multiple items

2 Answers2