Estoy tratando de lograr algo en javascript
Quiero establecer un color específico para cada categoría.
Por ejemplo: si categoría.nombre == x entonces color = azul si categoría.nombre == y entonces color = rojo ...
Lo intenté así, pero creo que me pierdo algo:
categories.forEach(category => { if (category.attributes.slug = "animation") { cat.style.color = animColor; } if (category.attributes.slug = "decor") { cat.style.color = decorColor; } if (category.attributes.slug = "illustrations") { cat.style.color = illuColor; } if (category.attributes.slug = "developpement-visuel") { cat.style.color = devVisuel; } if (category.attributes.slug = "realisations") { cat.style.color = real; } if (category.attributes.slug = "croquis") { cat.style.color = croquis; } }); <div> <Header categories={categories} homepage={homepage} /> <div className="hidden md:block px-5 pt-10"> <a className="hover:no-underline " href="/"> <h3 className="text-xl uppercase tracking-widest mb-4">{homepage.attributes.hero.title}</h3> </a> <h5 className="text-sm mb-10">{homepage.attributes.bio.text}</h5> <nav> <ul> {categories.map((category) => { return ( <li key={category.id} className="mb-4"> <Link href={`/category/${category.attributes.slug}`}> <a id="cat" className="uppercase font-light text-sm">{category.attributes.name}</a> </Link> </li> ) })} </ul> </nav> </div> </div>¿Puedes ayudarme a encontrar la solución?
Puede usar un objeto como un diccionario que traduce "babosa" a "color".
Puede establecer el atributo de color en la función interna categorías.mapa.
Eliminé id="cat" porque eso daría como resultado identificaciones duplicadas que nunca son buenas.
const colorMap = { "animation": animColor, "decor": decorColor, "illustrations": illuColor, "developpement-visuel": devVisuel, "realisations": real, "croquis": croquis }; <div> <Header categories={categories} homepage={homepage} /> <div className="hidden md:block px-5 pt-10"> <a className="hover:no-underline " href="/"> <h3 className="text-xl uppercase tracking-widest mb-4">{homepage.attributes.hero.title}</h3> </a> <h5 className="text-sm mb-10">{homepage.attributes.bio.text}</h5> <nav> <ul> {categories.map((category) => { return ( <li key={category.id} className="mb-4"> <Link href={`/category/${category.attributes.slug}`}> <a className="uppercase font-light text-sm" style=`color: ${colorMap[category.attributes.slug]}`>{category.attributes.name}</a> </Link> </li> ) })} </ul> </nav> </div> </div>