DEV Community

Discussion on: React-toastify v8 is live

Collapse
 
optimbro profile image
Rahul • Edited

Hi, I'm new to ReactJS, just practicing it but I want to use this with my simple function that fetches data from github users api.. This looks cool 😇

const url = 'https://api.github.com/users

const fetchUsers = async () => {
      const response = await fetch(url);
// show error if network failed etc
      const usersData = await response.json();
// Show error if not found
      setUsers(usersData);
// Show success notification
    };

fetchUsers();
Enter fullscreen mode Exit fullscreen mode

So, how can I use it with above simple example... and how to use the promise feature with the same..

And I think you are the original author 😍

Thanks

Collapse
 
optimbro profile image
Rahul
  useEffect(() => {
    const fetchUsers = async () => {
      const fetchUrl = fetch(url);
      toast.promise(fetchUrl, {
        pending: 'Fetching data',
        success: 'Fetched data successfully 👌',
        error: 'Something went wrong 🤯',
      });
      const response = await fetchUrl;
      const usersData = await response.json();
      setUsers(usersData);
    };

    fetchUsers();
  }, []);
Enter fullscreen mode Exit fullscreen mode

So I achived working with promise with async await, I hope its good.

Collapse
 
fkhadra profile image
Fadi Khadra

Hey @optimbro actually, toast.promise return the provided promise. So you can await it directly. You can check this example codesandbox.io/s/inspiring-forest-...