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?

CodePudding user response：

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>