Next.js Discord

Discord Forum

shadcn toast isnt working

Answered
Cassin's Finch posted this in #help-forum
Open in Discord
Cassin's FinchOP
hey guys anybody here familiar with shadcn TOAST
its just doenst work at all
what i'am doing wrong??????,

import { toast } from "@/components/ui/use-toast";

...

function onSubmit(data: z.infer<typeof FormSchema>) {
    login(data)
      .then(() => {
        toast({
          title: "Login successful",
          description: "You have successfully logged in.",
        });
      })
      .catch((error: any) => {
        toast({
          title: "Login failed",
          description: error.message,
        });
      });
  }
Answered by Forster's Tern
should be useToast for the import and are you initializing it?

const { toast } = useToast();
View full answer

9 Replies

Answer
@Cassin's Finch https://github.com/JellYouness/project-manager/blob/master/app/(auth)/login/page.tsx
B33fb0n3
The import looks good. But you need to use your toast like CRod said:
...

const { toast } = useToast()

function onSubmit(data: z.infer<typeof FormSchema>) {
    login(data)
      .then(() => {
        toast({
          title: "Login successful",
          description: "You have successfully logged in.",
        });
      })
      .catch((error: any) => {
        toast({
          title: "Login failed",
          description: error.message,
        });
      });
  }

Like that:
If you directly want to import it, use https://ui.shadcn.com/docs/components/sonner @Cassin's Finch
Forster's Tern
try this..

import { useToast } from "@/components/ui/use-toast";

export default function Home() {
const { toast } = useToast();
const [login, { isLoading }] = useLoginMutation();
const router = useRouter();
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
defaultValues: {
email: "ded",
password: "dede",
},
});
Cassin's FinchOP
thank you guys
i also needed a <Toaster /> in body element
Forster's Tern
good catch and glad you solved it