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.
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>
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>
...