Tengo el siguiente código y necesito agregarle algunas funciones nuevas. Básicamente, la función de mapa itera a través de una matriz, y si solo hay un elemento en la matriz, entonces no quiero agregar una nueva clase, pero si este es el primer elemento en una matriz de 2 elementos, quiero para agregar un nombre de clase.
{section?.values?.link.map((link, index) => { return ( <LinkComponent key={index} className={clsx({ "jc-left": link?.values?.linkType !== "primary-button", })} </LinkComponent> ...Sé que se parece a la que ya está allí, en el sentido de que puse el nombre de la clase entre comillas seguido de un punto y coma y luego la regla, simplemente no sé cómo escribir lo que me parece una regla compleja. Cualquier ayuda es apreciada.
Si entiendo correctamente, su pregunta es que desea agregar className si array.length > 1 y luego agregar class al primer elemento de la matriz.
{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>Pero, ¿qué sucede si tiene más de dos elementos? Entonces supongo que agregará clase a todos los elementos excepto al último.
{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>Si desea renderizar condicionalmente con clsx, puede hacerlo en función de las dos condiciones:
{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> ...