Type 'string' is not assignable to type '"" | «success» | warning | "error"?

Question

typescript

Component:

interface AlertProps {
  variant: "success" | "warning" | "error" | "";
}

const Alert = ({ variant }: AlertProps) => {}

Component call:

const [alertvariant, setAlertvariant] = useState("success");

  return (
     <Alert variant={alertvariant} />
)

As a result, the error Type 'string' is not assignable to type '"" | "success" | "warning" | "error".

Answer 1

const [alertvariant, setAlertvariant] = useState<AlertProps["variant"]>("success");