Next.js Discord

Discord Forum

useState with 4 different options

Unanswered
! nolikas posted this in #help-forum
Open in Discord
! nolikasOP
I have this little code snippet where I was testing useState:
"use client";
import Link from "next/link";
import { useState } from "react";
import { FaCircleDot } from "react-icons/fa6";

export default function Nuorodos() {
  const [color, setColor] = useState<"emerald" | "amber" | "indigo" | "rose">(
    "indigo"
  );
  return (
    <div className="flex flex-col p-8 max-w-xl self-center mx-auto">
      <div className="flex flex-col bg-zinc-800 rounded-lg p-4">
        <div className="flex group">
          <FaCircleDot
            className={`h-4 w-auto self-center ml-2 mr-4 text-zinc-400 group-hover:text-${color}-300 transition-all`}
          />
          <Link
            href="/page"
            className={`group-hover:underline decoration-${color}-400 transition-all`}
          >
            Page
          </Link>
        </div>
      </div>
    </div>
  );
}
So for some reason, if I set the color to emerald or amber, the color changes as expected. But, if I try using indigo or rose, they just wont work. If I set it manually to that color, it works fine. Also, I have tried it like this, but still same outcome as before:
...
const [color, setColor] = useState("indigo");
...

7 Replies

American black bear
it happened to me before
here is a way to to fix
Add all possible classes to the code, but in a way that they don't affect the rendered output.

Use conditional class names properly within JSX.
"use client";
import Link from "next/link";
import { useState } from "react";
import { FaCircleDot } from "react-icons/fa6";

export default function Nuorodos() {
  const [color, setColor] = useState<"emerald" | "amber" | "indigo" | "rose">(
    "indigo"
  );

  // Ensure these classes are included by Tailwind
  const includedClasses = [
    "text-emerald-300", "text-amber-300", "text-indigo-300", "text-rose-300",
    "decoration-emerald-400", "decoration-amber-400", "decoration-indigo-400", "decoration-rose-400"
  ];

  return (
    <div className="flex flex-col p-8 max-w-xl self-center mx-auto">
      <div className="flex flex-col bg-zinc-800 rounded-lg p-4">
        <div className="flex group">
          <FaCircleDot
            className={`h-4 w-auto self-center ml-2 mr-4 text-zinc-400 group-hover:text-${color}-300 transition-all`}
          />
          <Link
            href="/page"
            className={`group-hover:underline decoration-${color}-400 transition-all`}
          >
            Page
          </Link>
        </div>
      </div>
      {/* Invisible container to include all potential classes */}
      <div className="hidden">
        {includedClasses.map(cls => <div className={cls} key={cls}></div>)}
      </div>
    </div>
  );
}
! nolikasOP
oh thanks man 🙂
muadpn
I think this approach is not right, and using tailwind-merge and clsx is the right one, or else it wouldn't render as expected.