Type 'string' is not assignable to type 'SOME TYPE', small confusion when passing props

Issue

Below is how I am using my reusable component Badge made by me. It has types of props as follows but this gives some kind of error as:

Here is full code,

const variantsMap = {
  done: "success",
  processing: "info",
  suspened: "warning",
  cancelled: "error",
};

interface ITransactionProps {
  status: "done" | "processing" | "suspened" | "cancelled";
  label: string;
}

const MyComponent = ({ status, label }: ITransactionProps) => {
  return <Badge variant={variantsMap[status]}>{label}</Badge>;
};

interface IBadgeProps {
  variant: "success" | "info" | "warning" | "error";
  children: string;
}

const Badge = ({ variant, children }: IBadgeProps) => {
  return <div className={`badge bordered circular ${variant}`}>{children}</div>;
};

How can this be solved in proper way? I would like to know all the ways if we can solve it in multiple ways.

Solution

You can declare variantsMap a bit differently

const variantsMap: Record<string, "success" | "info" | "warning" | "error"> = ...

I would extract that into a new type for readability.

type Variant = "success" | "info" | "warning" | "error";

const variantsMap: Record<string, Variant> = ...

interface IBadgeProps {
  variant: Variant;
  children: string;
}

Answered By - Daniel A. White