Problem with useToast.

[svrem]

I was trying to use useToast but I wasn't able to make it work. I imported useToast from @geist/react and then just copied the code from the doc site. But when I clicked the button it didn't work. This is my code:

import { useToasts, Button } from "@geist-ui/react";

const toast = () => {
  const [toasts, setToast] = useToasts();
  const click = () =>
    setToast({ text: "The Evil Rabbit jumped over the fence." });
  return <Button onClick={click}>Show Toast</Button>;
};

export default toast;

I greatly appreciate your help...

Btw:
I don't really know if I'm good here asking this question. If so please let me know and I will delete this post.

[ghost]

You need to use useToasts in a react component. toast should be replaced by Toast.

import { useToasts, Button } from '@geist-ui/react';

const Toast = () => {
  const [, setToast] = useToasts();
  const onClick = () => setToast({ text: 'The Evil Rabbit jumped over the fence.' });

  return <Button onClick={onClick}>Show Toast</Button>;
};

export default Toast;

[svrem]

If you reload it's there

[svrem]

Oh

[svrem]

I have found the problem. Apperently you can't name your file toast.js. When I tested it on codesandbox it worked and I toughed that was weird. Then I tried to rename my file. And that worked.

Thank you very much for all the help.

[ghost]

It works. Here are the steps I followed.

git clone https://github.com/svrem/My-project.git
cd .\My-project\Sharing\
yarn install
yarn dev

Open your browser to http://localhost:3000 but it would appear as a 404 as you don't have an index.js file. Now go to http://localhost:3000/toast to see the button, and when clicked, a toast appears in the bottom right corner.

[svrem]

Weird, when I do those steps it works for me also. But it doesn't work on my main project. But what did work is just to rename the file. So it is fixed. Thank you for all the help!