I'm trying to achieve something in javascript
I want to set a specific color to each categories
For exemple : if catergory.name == x then color = blue if category.name == y then color = red ...
I tried like this, but I think I miss something :
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>
Can you help me find the solution?
You can use an object as a dictionary translating "slug" to "color".
You can set the color attribute in the categories.map inner function.
I removed id="cat" because that would result in duplicated IDs which are never good.
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>